/* import font family is == Plus Jakarta Sans ==*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
/* import font family is == Poppins ==*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');


/* 
Theme Name:     Doctor
Theme URI:      
Author:         
Author URI:     
Description:    
Version:        1.0
License:        
License URI:

 [Table of Content]
 01. Reset
 02. Global Style 
	01. Index Page Style
        section Index Page
            1.1. header section
            1.2. hero section
            1.3. healthcare section
            1.4. getabout section
            1.5. benefits section
            1.6. timeing section
            1.7. approach section
            1.8. technology section
            1.9. specialist section
            1.10. appointment section
            1.11. member section
            1.12. patient section
            1.13. Testimonials section
            1.14. questions section
            1.15. articles section
            1.16. footer section
   
    02. Doctors Page Style

    03. Services Page Style

    04. Contact Page Style
         section Contact Page
            4.1 location section

    05. About Page Style
         section About Page
            5.1. hero section 
            5.2. vision section 

    06. Pricing Page Style

    07. Patients Page Style

    08. Testimonials Page Style
         section Testimonials Page
            8.1. testimonial section

    09. Faq Page Style

    10. Blogs Page Style

    11. 404 Page Style
         section 404 Page 
            11.1. 404 hero

    12. Coming Page Style
         section Coming Page 
            12.1. Coming hero

*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}


/* HTML5 display-role reset for older browsers */
/* =====  01. Reset  ====== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    font-family: "Poppins", sans-serif;
    line-height: 1;
    background: #fff;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}
button:focus {
    outline: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
select::-ms-expand {
    display: none;
}
label {
    font-weight: normal;
}
iframe {
    width: 100%;
}
/* =====  End of 01. Reset  ====== */
/* ===== 02. Global Style ===== */
h1{
    font-size: 60px;
    font-weight: 700;
    line-height: 66px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
h2{
    font-size: 46px;
    font-weight: 700;
    line-height: 52px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
h3{
    font-size: 35px;
    font-weight: 600;
    line-height: 41px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
h4{
    font-size: 26px;
    font-weight: 500;
    line-height: 32px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
h5{
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
h6{
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
p{
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    font-family: 'Poppins', sans-serif;
}
button{
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
a{
    font-size: 14px ;
    font-weight: 500 ;
    line-height: 22px;
    font-family: 'Poppins', sans-serif;
}
.clr{
    color: #F5B83D !important;
}
/* ===hover link and button=== */
.hover1 a{
    display: inline-block;
    position: relative;
    overflow: hidden;
    color: black;
    z-index: 1;
    padding: 16px 38px 16px 38px !important;
    text-decoration: none;
    transition: transform 0.3s ease;
    text-align: center;
    border-radius: 30px;
}
.hover1 a:hover {
    color: #F5B83D !important;
    transform: translateY(-5px);
    background-color: #fff;
}
.hover2 a{
    display: inline-block;
    position: relative;
    overflow: hidden;
    color: #fff;
    z-index: 1;
    padding: 16px 38px 16px 38px !important;
    text-decoration: none;
    transition: transform 0.3s ease;
    text-align: center;
    border-radius: 30px;
    border: 1px solid #F5B83D;
}
.hover2 a:hover {
    color: #2F2F2F;
    background-color: #F5B83D;
    transform: translateY(-5px);
 
}
.hover3 a{
    display: inline-block;
    position: relative;
    overflow: hidden;
    color: #fff;
    z-index: 1;
    padding: 15px 60px 15px 60px !important;
    text-decoration: none;
    transition: transform 0.3s ease;
    text-align: center;
    border-radius: 30px;
    background-color: #F5B83D;
}
.hover3 a:hover {
    background-color: #231F53;
    transform: translateY(-5px);
}
.btn1 button{
    color: #fff;
    padding: 16px 38px 16px 38px !important;
    transition: 0.1s ease-in-out;
    border-radius: 30px;
    background-color: #F5B83D;
    border: none;
}
.btn1 button:hover {
    background-color: #231F53;
}
/* ===input field color setting=== */
input,
input:hover,
input:focus,
input:active {
    -webkit-text-fill-color: black !important;
    transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}


/* ======= 1.1. header section ========= */
.navbar-brand img{
    width: 160px;
    height: auto;
}
header nav {   
    background-color: #fff;
    border-radius: 25px;
    z-index: 3;
    position: relative;
    padding: 10px 10px;
}
.nav-item a{
    color: #2F2F2F;
    font-weight: 500;
}
#navbarNav {
    padding: 5px 15px;
}

.nav-phone a{
    text-decoration: none;
    padding: 5px;
    color: #2F2F2F;
}
.nav-item a:hover{
    color: #F5B83D !important;
}
.logo-nav{
    display: none;
}
.dropdown:hover .dropdown-menu{
    display: block !important;
    border-radius: 30px;
}
.dropdown-menu {
    width: 210px;
}
.dropdown-item:hover {
    color: #1e2125;
    background-color: transparent; 
}
.dropdown-item.active, .dropdown-item:active{
    background-color: transparent;
}
.dropdown-item {
    padding: 14px 50px 14px 25px;
}
.sidenav{
    height: 100%;
    width: 0%;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 15px;
}
.sidenav a{
    padding: 30px 12px 0px 28px;
    text-decoration: none;
    font-size: 16px;
    display: block;
    transition: 0.3s;
    color: #2F2F2F;
}
.sidenav a:hover{
    color: #DB9B1E;
}
.side-bar-color{
    color: #bdbd01 !important;
}
.side-bar-close-btn{
   display: block;
   margin: auto;
   padding-right: 10px;
}
.sidenav i{
    color: #F5B83D;
    font-size: 40px;
}
.nav-logo img{
    width: 170px;
    height: auto;
}
.a-slid{
    background-color: transparent;
    border: none;
    color: #DB9B1E;
    margin-left: 13px;
    font-size: 16px;
    padding: 0px 14px 9px 14px;
    margin-top: 12px;
    border-radius: 36px;
}
.myst{
    display: none;
}
#slid-btn i{
    color: #DB9B1E;
    font-size: 25px;
}
.navbar-toggle{
    color: #fff;
    background-color: #F5B83D;
    border: 2px solid #F5B83D;
    border-radius: 7px;
    display: none;
}
.navbar-toggle i{
    padding: 4px 4px;
    font-size: 25px;
}
/* ======= End of 1.1. header section ========= */
/* ======= 1.2. hero section ========= */
.header-hero-bg{
    position: relative;
    /*background: url('../images/index/hero.webp');*/
/*    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;*/
    top: 0px;
    left: 0px;
    
}
.header-hero-color{
    background: linear-gradient(0deg, #7B54FE 22.65%, rgba(123, 84, 254, 0.00) 73.5%), linear-gradient(0deg, rgba(123, 84, 254, 0.30) 0%, rgba(123, 84, 254, 0.30) 100%);
}
.hero h1{
    /*padding: 145px 100px 10px 100px;*/
    padding: 245px 100px 10px 100px;
    text-align: center;
    color: #fff;
}
.hero .pt-2{
    padding: 40px 270px;
    text-align: center;
    color: #F7F7FF;;
}
.hero .gap-2 a{
    border-radius: 30px;
    text-decoration: none;
    color: #fff;
    margin-bottom: 40px;
}
.hero .gap-2 a:first-child{
    text-decoration: none;
    background-color: #F5B83D;
    color: #fff;
}
.hero .gap-2 a:first-child:hover{
    background-color: #fff;
}
.hero .gap-2 a:nth-child(2):hover{
    background-color: #fff;
}
.find-doctor{
    background-color: #231F53;
    border-radius: 30px;
    width: 90%;
    position: relative;
    top: 80px;
    z-index: 1;
}
.f-d-need{
    padding: 70px 20px 70px 0px;
  
}
.f-d-need h3{
    color: #fff;
}
.f-d-need p{
   padding: 20px 0px 40px 0px;
   color: #fff;
}
.f-d-need a{
    border: 1px solid #F5B83D;
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
}
.f-a-doctor{
    background-color: #fff;
    padding: 45px 32px;
    border-radius: 30px;
    position: absolute;
    width: 100%;
    bottom: -275px;
    left: 30px;
    box-shadow: 0px 15px 15px 0px rgba(47, 47, 47, 0.15);
}
.f-a-doctor h5{
    color: #2F2F2F;
}
.f-a-doctor h6{
    padding: 10px 5px;
}
.find-doctor .position-relative{
    width: 100%;

}
.f-a-doctor select{
    border-radius: 30px !important;
    display: flex;
}
.f-a-doctor option{
    font-weight:normal;
    display: block;
    white-space: nowrap;
    min-height: 1.2em;
    padding: 16px;
}
.f-a-doctor select ,.f-a-doctor input,.f-a-doctor button{
    width: 100%;
    padding: 18px ;
    border-radius: 30px;
    border: 1px solid #BCBCBC;
    font-size: 14px;
}
select {
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position:  right;
    background-position-x: 98%;
    -webkit-appearance: none;
    appearance: none;
}
select option{
    -webkit-appearance: none;
    appearance: none;
    padding: 20px;
}
.hero-icon{
    padding-top: 10px;
}
.hero-icon i{
  font-size: 25px;
  animation: bounce 2s infinite;
  color: #fff;
  cursor: pointer;
}
.hero-icon i:hover{
  color: #F5B83D;
}
@keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  /*======= live-chat======= */
.live-chat{
    position: absolute;
    top: 85%;
    right: 2%;
    border-radius: 50%;
    background-color: #F5B83D;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: fixed;
    z-index: 5;
    height: auto;
    animation: zoomInOut 0.4s infinite alternate;
    transform-origin: center;
    padding: 14px 12px;
}
.live-chat:hover{
    background-color: #fff;
}
.live-chat i{
    color: #fff;
    font-size: 30px;
}
.live-chat:hover i{
    color: #F5B83D;
}
@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.06);
    }
}

/* ======= End of 1.2. hero section ========= */
/* ======= 1.3. healthcare section ========= */
.healthcare{
    background-color: #EBEBFE;
    padding-top: 200px;
    padding-bottom: 100px;  
    position: relative; 
}
.left-text {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    white-space: nowrap;
    transform-origin: center;
   font-size: 50px;
   letter-spacing: 21px;
   color: #CACAFF;
   font-weight: 200 !important;
   position: absolute;
   left: 3%;
   top: 33%;
}
.healthcare h2{
    text-align: center;
    color: #2F2F2F;
}
.healthcare .text-center{
    padding: 25px 200px;
    color: #2F2F2F;
}
.healthcare a{
    padding: 15px 60px !important;
}
.healthcare .row{
    margin-bottom: 40px;
}
.healthcare .col-lg-3{
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.healthcare .col-lg-3:hover{
    box-shadow: 0px 34px 47px 0px rgba(47, 47, 47, 0.15);
}
.healthcare .col-lg-3 h5{
    padding-top: 15px;
    padding-bottom: 10px;
    color: #2F2F2F;
}
.healthcare .col-lg-3 p{
   font-size: 14px;
   color: #BCBCBC;
}
.healthcare .col-lg-3 img[alt = 'h-icon1']{
    width: 48px;
}
.healthcare .col-lg-3 img[alt = 'h-icon2']{
    width: 64px;
}
.healthcare .col-lg-3 img[alt = 'h-icon3']{
    width: 68px;
}
.healthcare .col-lg-3 img[alt = 'h-icon4']{
    width: 64px;
}
.healthcare .col-lg-3 img[alt = 'h-icon5']{
    width: 62px;
}
.healthcare .col-lg-3 img[alt = 'h-icon6']{
    width: 64px;
}
.healthcare .col-lg-3 img[alt = 'h-icon7']{
    width: 50px;
}
.healthcare .col-lg-3 img[alt = 'h-icon8']{
    width: 58px;
}
.healthcare .col-lg-3:hover img{
    height: auto;
    animation: zoomInOut 0.4s infinite alternate; /* Adjust the animation duration as needed */
    transform-origin: center;
}
@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.06); /* Adjust the scale factor for the desired zoom level */
    }
}
/* ===about page css=== */
.about-healthcare{
    padding-top: 100px;
}
/* ======= End of 1.3. healthcare section ========= */
/* ========= 1.4. getabout section =========== */
.get-about{
    background-color: #231F53;
    padding: 100px 0px;
}
.get-about .get-h2{
    padding: 0px 0px 30px 0px;
    color: #fff;
    margin: 10px 0px;
}
.get-about h5{
    color: #F7F7FF;
}
.get-about p{
    padding: 0px 0px 20px 0px;
    color: #fff;
}
.get-about ul:nth-child(2){
    padding-left: 80px;
}
.get-about ul li{
    color: #fff;
    padding: 30px 0px;
    display: flex;
    align-items: center;
    justify-content: start;
}
.get-about img{
    border-radius: 30px;
    width: 100%;
    height: auto;
}
.cont-bg1{
    background-color: #7B54FE;
    padding: 40px 40px;
    border-radius: 30px;
}
.cont-bg2{
    background-color: #3ED0F5;
    padding: 50px 16px;
    border-radius: 30px;
}
.cont-bg2 h2, .cont-bg1 h2{
  color: #fff;
}
.get-about i{
    margin-right: 20px;
    font-size: 30px;
    color: #F5B83D;
}
.getabout-text{
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    white-space: nowrap;
    transform-origin: center;
   font-size: 50px;
   letter-spacing: 21px;
   color: #383371;
   font-weight: 100 !important;
   position: absolute;
   right: 9%;
   top: -72px;
   padding: 0px !important;
}
/*===== about page css===== */
.get-bg{
    background: #fff;
}
.get-h2-2{
  color: #2F2F2F;
}
.get-about-p{
    color: #2F2F2F !important;
    padding: 30px 0px !important;
}
.get-about-p p {
    color: #2F2F2F !important;
    padding: 0px 0px !important;
}
.get-bg h5{
    color: #2F2F2F !important;
}
.get-bg a{
    color: #2F2F2F !important;
}
/* ========= End of 1.4. getabout section =========== */
/* ========= 1.5. benefits section =========== */
.benefits{
    background: #F7F7FF;
    padding: 100px 0px;
    position: relative;
}
.benefits h2{
    padding: 0px 170px;
    color: #2F2F2F;
}
.bnf-p{
    padding: 30px 160px;
    color: #2F2F2F;
}
.benefits .col-lg-3{
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    gap: 30px;
    padding: 50px 25px;
    border-radius: 30px;
}
.benefits .col-lg-3:hover{
    box-shadow: 0px 34px 47px 0px rgba(47, 47, 47, 0.15);
}
.benefits .col-lg-3 p{
    color: #2F2F2F;
    padding: 10px 27px;
}
.benefits .col-lg-3 h5{
    color: #2F2F2F;
    text-align: center;
}
.benefits .col-lg-3 a{
    color: #2F2F2F;
}

.benefits .col-lg-3 a:hover{
 color: #F5B83D;
}

.benefits .col-lg-3 a:hover i{
 color: #F5B83D;
}

.benefits figure{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #F7F7FF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.benefits figure img{
  width: 38px;
  transition: transform 0.2s ease-in-out;
}
.benefits a{
    text-decoration: none;
    color: black;
}
.benefit-text{
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    white-space: nowrap;
    transform-origin: center;
   font-size: 50px;
   letter-spacing: 21px;
   color: #CACAFF;
   font-weight: 100 !important;
   position: absolute;
   right: 3%;
   top: 41%;
}
/* ========= End of 1.5. benefits section =========== */
/* ========= 1.6. timeing section =========== */
.timeing{
    background: linear-gradient(0deg, rgba(35, 31, 83, 0.57) 0%, rgba(35, 31, 83, 0.57) 100%);
    padding: 100px 0px;
    position: relative;
}
.timeing::before{
   content: "";
   /*background: url('../images/bg/timeing-bg.webp');*/
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: -1;
}
.timeing h2{
    color: #fff;
}
.tim-p{
    padding: 35px 0px;
    color: #fff;
}
.timeing a{
    padding: 30px 0px;
    text-decoration: none;
}
.timeing .gap-4 {
    background: rgba(255, 255, 255, 0.77);
    padding: 45px 45px;
    border-radius: 30px;
    margin: 10px 75px;
}
.t-table h4{
    color: #2F2F2F;
}
.t-table p{
    color: #2F2F2F;
    font-size: 18px ;
    font-weight: 600;
}
.timeing .sunday p{
    color: red;
}
/* ===about page css=== */
.about-timimg{
    background: linear-gradient(0deg, #231F53 3.41%, rgba(35, 31, 83, 0.00) 90.91%), linear-gradient(0deg, rgba(35, 31, 83, 0.30) 0%, rgba(35, 31, 83, 0.30) 100%);
    padding: 150px 0px;
}
.about-timimg .gap-4{
    background: linear-gradient(180deg, rgba(35, 31, 83, 0.40) 0%, #231F53 100%, rgba(35, 31, 83, 0.00) 100%);
    border-radius: 0px;
} 
.about-timimg h4{
    color: #fff;
    text-align: center;
}
.about-timimg p{
    color: #fff;
}
.about-timimg .t-table{
    position: absolute;
    bottom: 0px;
}
.about-timimg .t-table .d-flex{
  gap: 100px;
}
/* ========= End of 1.6. timeing section =========== */
/* =========  1.7. approach section =========== */
.approach{
    background-color: #231F53;
    padding: 100px 0px;
    position: relative;
}
.approach h2{
    color: #fff;
    text-align: center;
    padding: 0px 180px;
}
.approach code{
   font-size: 46px !important;
   line-height: 52px !important;
   font-weight: 700 !important;
   font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.approach i{
    font-size: 50px;
    font-weight: 500;
    color: #3ED0F5;
}
.approach .col-lg-3:hover i{
    color: #fff;
}
.aph-p{
    color: #fff;
    padding: 30px 180px;
    text-align: center;
}
.approach h5{
    padding: 20px 17px;
}
.approach .col-lg-3 h5{
    color: #2F2F2F;
}
.approach .col-lg-3:hover h5{
    color: #fff;
}
.approach .col-lg-3 p{
    color: #2F2F2F;
}
.approach .col-lg-3:hover p{
    color: #fff;
}
.diagno-h5{
    padding: 20px 46px !important;
}
.approach .col-lg-3{
    display: block;
    text-align: center;
    background-color: #fff;
    border-radius: 30px;
    padding: 60px 20px 36px 20px;
}
.approach .col-lg-3:hover{
    background-color: #7B54FE;  
    transition: 0.3s ease-in-out;
}
.approach span{
    width: 75px;
    height: 60px;
    background-color: #F5B83D;
    color: white;
    position: absolute;
    top: -60px;
    left: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    font-size: 30px;
}
.approach .hover2{
    margin-top: 50px;
}
.right-text{
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    white-space: nowrap;
    transform-origin: center;
   font-size: 50px;
   letter-spacing: 21px;
   color: #383371;
   font-weight: 200 !important;
   position: absolute;
   right: 3%;
   top: 12%; 
}
/* ========= End of 1.7. approach section =========== */
/* ========= 1.8. technology section  =========== */
.technology{
    background-color: #F7F7FF;
    padding: 100px 0px;
}
.technology h2{
    color: #2F2F2F;
}
.techno-p{
    padding: 25px 0px;
    color: #2F2F2F;
}
.technology .teach-1 p{
    position: absolute;
    left: 5%;
    top: 1%;
    writing-mode: vertical-rl;
    transform: rotate(-180deg); 
    white-space: nowrap;
    font-size: 30px;
    color: white;
    letter-spacing: 13.712px;
    font-weight: 200;
}
.technology .teach-1{
    background: url('../images/bg/tch-bg.png');
    background-size: 94% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.technology .teach-1 img {
    width: 100%;
    border-radius: 8%;
    padding: 30px 0px 35px 0px;
}
.head-techno h5{
   cursor: pointer;
}
.accordian-2nd h6{
    font-size: 1rem;
    font-weight: 700;
}
.accordion1 {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    border-radius: 25px;
  }
  .accordion-item1 {
    margin-bottom: 5px;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 30px;
    margin-bottom: 15px;
  }
  .accordion-item1 img{
    width: 40px;
  }
  .accordion-header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px 7px 25px;
    cursor: pointer;
  }
  .accordion-header1 h5{
   color: #2F2F2F;
  }
  .accordion-toggle1 {
    width: 20px;
    height: 20px;
    background-size: cover;
    transition: transform 0.3s ease-in-out;
    padding-right: 19px;
  }
  .accordion-item1.active {
    box-shadow: 0px 15px 15px 0px rgba(47, 47, 47, 0.15);
  }
  .accordion-item1.active h5{
   color: #F5B83D;
   font-weight: 700;
  }
 
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    margin: 5px 0px;
  }
  .accordion-content p{
    color: #2F2F2F;
    padding: 0px 5px 0px 25px;
  }

  .accordion-item1.active .accordion-content {
    max-height: 1000px;
    padding-top: 15px;

  }

/* ========= End of 1.8. technology section =========== */
/* ========= 1.9. specialist section =========== */
.specialist{
    background-color: #EBEBFE;
    padding: 100px 0px;
    margin: -2px 0px;
}
.specialist p{
   padding: 30px 160px; 
   text-align: center;
}
.specialist h2{
    color: #2F2F2F;
}
.specialist .col-lg-6{
    background-color:  #fff;
    padding: 23px;
    border-radius: 30px;
}
.star-like h5{
    color: #2F2F2F;
}
.specialist .col-lg-6:hover{
    box-shadow: 10px 15px 15px 0px rgba(47, 47, 47, 0.15);
}
.specialist .col-lg-6 img{
    border-radius: 15px;
    width: 100%;
}
.specialist .hover2 a {
    padding: 14px 19px 14px 19px !important;
    color: #2F2F2F;
}
.specialist .clearfix span i{
    color: #F5B83D;
    font-size: 16px;
}
.specialist .mt-5 a{
    padding: 13px 50px !important;
}
.special-text{
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    white-space: nowrap;
    transform-origin: center;
   font-size: 50px;
   letter-spacing: 21px;
   color: #CACAFF;
   font-weight: 200 !important;
   position: absolute;
   right: 3%;
   top: 135px;
   padding: 0px !important;
}

/* ========= End of 1.9. specialist section =========== */
/* ========= 1.10. appointment section =========== */
.appointment{
    padding: 100px 0px;
    background-color: #F7F7FF;
}
.appoinment-bg{
    /*background: url('../images/bg/Appointment-bg.png');*/
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat; 
}
.appointment img{
    width: 80%;
    border-radius: 30px;
    margin-bottom: 10%;
}
.ap-card{
    background-color: #fff;
    padding: 40px 10px;
    border-radius: 30px;
    position: relative;
    top: -50px;
    box-shadow: 0px 11px 26px 1px rgba(0, 0, 255, .2);
}
.ap-card h3{
   padding: 0px 35px;
   color: #000;
}
.ap-card p{
    padding: 20px 35px;
    color: #2F2F2F;
}
.appointment input{
    border: none;
    border-bottom: 1px solid;
    height: 60px;
    color: black;
}
.appointment input::placeholder{
    color: black;
}
.appointment input:focus{
   outline: none;
}
.appointment select{
    border: none;
    border-bottom: 1px solid;
    height: 60px;
}
.appointment select:focus{
  outline: none;
}
.appointment textarea{
    border: none;
    border-bottom: 1px solid;
    margin-top: 30px;
}
.appointment textarea::placeholder{
   color: black;
}
.appointment textarea:focus{
    outline: none;
}
.appointment button{
    width: 91%;
    margin-top: 40px;
}
/* ========= End of 1.10. appointment section =========== */
/* ========= 1.11. member section =========== */
.member{
    background: #F7F7FF;
    position: relative;
    z-index: 2;
    margin: -2px 0px;
}
.member h2{
    color: #2F2F2F;
}
.mem-p{
    padding: 30px 180px 60px 180px;
    text-align: center;
    color: #2F2F2F;
}
.member .col-lg-4:hover{
    box-shadow: 0px 34px 47px 0px rgba(47, 47, 47, 0.15);
}
.member .col-lg-4:first-child{
    background: #fff;
    border-radius: 30px;
}
.member .col-lg-4:nth-child(2){
    background: #7B54FE;
    border-radius: 30px;
}
.member .col-lg-4:nth-child(3){
    background: #fff;
    border-radius: 30px;
}
.member .col-lg-4 figure{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #BCBCBC;
    margin: 20px 0px;
}
.member .col-lg-4 img{
    width: 44px;
}
.member .col-lg-4 .gap-1{
    color: white;
    width: 100%;
    padding: 15px 0px;
    justify-content: center;
}
.member .col-lg-4 ul li i{
    background-color: #F5B83D;
    border-radius: 50%;
}
.member .col-lg-4:first-child .gap-1{
    background-color: #7B54FE;
    margin: 20px 0px;
}
.member .col-lg-4:nth-child(2) .gap-1{
    background-color: #231F53;
    margin: 20px 0px;
}
.member .col-lg-4:nth-child(2) p{
    color: white;
}
.member .col-lg-4:nth-child(2) h5{
   color: #fff;
}
.member .col-lg-4:nth-child(2) ul li{
    color: #fff;
}
.member .col-lg-4:nth-child(3) .gap-1{
    background-color: #7B54FE;
    margin: 20px 0px;
}
.member .col-lg-4 p{
    padding: 0px 40px;
    text-align: center;  
    color: #2F2F2F; 
}
.member ul{
    padding: 25px 0px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.member li{
    display: flex;
    gap: 10px;
    color: #2F2F2F;
}
.member .hover1{
    margin-bottom: 20px;
    margin-top: 10px;
}
.member .row > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.mt-a a{
    color: #fff !important;
}
.member-text{
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    white-space: nowrap;
    transform-origin: center;
   font-size: 50px;
   letter-spacing: 21px;
   color: #CACAFF;
   font-weight: 100 !important;
   position: absolute;
   left: 3%;
   top: 25%;
}
.tick li figure{
    width: 0px !important;
    height: 0px !important;
    background-color: transparent !important;
    margin: 9px 14px 0px 0px !important;
}
.clr-cross{
    color: #BCBCBC !important;
}
.member .col-lg-4{
    padding: 30px 0px;
}
/* ===pricing page css=== */
.pricing-member{
    padding: 100px 0px !important;
}
/* ========= End of 1.11. member section =========== */
/* ========= 1.12. patient section =========== */
.patient{
    background: #F7F7FF;
    padding: 100px 0px;
    position: relative;
}
.patient .row > * {
    padding-right: 5px !important;
    padding-left: 5px !important;
}
.patient h2{
    text-align: center;
    padding: 2px 244px;
    color: #2F2F2F;
}
.patient-p{
    text-align: center;
    padding: 30px 170px;
    color: #2F2F2F;
}
.patient .col-lg-3{
    overflow: hidden;
    border-radius: 30px;
}
.patient img{
    max-width: 100%;
    height: 450px;
    border-radius: 30px;
    object-fit: cover;
}
.main{
    position: relative;
    overflow: hidden;
    transition: 0.1s ease-in-out;
}
.overlay{
    position: absolute;
    background: linear-gradient(180deg, rgba(123, 84, 254, 0.09) 0%, rgba(123, 84, 254, 0.5) 100%);
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: 0.4s ease-in-out;
    overflow: hidden;
    border-radius: 30px;
}
.overlay::before{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: 0.1s ease-in-out;
    overflow: hidden;
    z-index: -1;
    opacity: 0.9;
}
.main:hover .overlay{
    height: 100%;
}
.over-h{
    height: 100%;
    border-radius: 30px;
    transition: 0.9s ease-in-out;
}
.content{
    position: absolute;
    content: "";
    z-index: 2;
    width: 250px;
    height: 30%;
    top: 7%;
    left: 50%;
    transition: 0.4s ease-in-out;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%, 50%);
}
.patient .content figure{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #BCBCBCCC;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.patient .content figure:hover{
    background-color: #F5B83D;
}
.patient .content img{
    width: 28px;
    height: auto !important;
}
.patient .content h4{
    color: #fff;
    padding: 20px 0px;
    width: 250px;
}
.patient .content p{
    color: #fff;
    width: 250px;
    
}
/* ===about page css=== */
.about-patient{
    padding-top: 0px;
}
/* ========= End of 1.12. patient section =========== */
/* ========= 1.13. Testimonials section =========== */
.Testimonials{
    padding: 100px 0px;
    background: #231F53;
    position: relative;
}
.Testimonials h2{
    color: #fff;
    text-align: center;
}
.test-p{
    color: #fff;
    text-align: center;
    padding: 30px 170px;
}
.Testimonials .t-bg{
    /*background: url('../images/bg/slider-bg.png');
    background-size: 75% 82%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;*/
}
.Testimonials .man{
    width: 30%; 
}
.Testimonials .man img{
    width: 100%; 
    border-top-left-radius: 30px; 
    border-bottom-left-radius: 30px;
}
.Testimonials .text{
    width: 40%; 
    border-top-right-radius: 30px; 
    border-bottom-right-radius: 30px;
    background-color: #fff;
    padding: 40px 40px !important;
}
.Testimonials .text i{
    padding-right: 7px;
    color: #F5B83D;
}

.Testimonials .row>*{
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-right: 0px ;
    padding-left: 0px;
}
.tesimon-slider h5{
    color: #2F2F2F;
}
.tesimon-slider p{
    color: #2F2F2F;
}
.tesimon-slider{
    user-select: text;
  }
.testimon-text{
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    white-space: nowrap;
    transform-origin: center;
   font-size: 50px;
   letter-spacing: 21px;
   color: #CACAFF;
   font-weight: 100 !important;
   position: absolute;
   right: 3%;
   top: 14%;
}
  
/* ========= End of 1.13. Testimonials section=========== */
/* ========= 1.14. questions section =========== */
.questions{
    background: #F7F7FF;
    padding-top: 100px;
}
.questions h2{
    padding: 0px 120px;
    text-align: center;
}
.ques-p{
    text-align: center;
    padding: 30px 170px;
}
.questions  h5{
    color: #2F2F2F;
    }
    .questions p{
    color: #2F2F2F;
    }
    .questions h2{
    color: #2F2F2F;
    }
.bg-box figure{
    clip-path: circle(50%);
    width: 430px;
    height: 430px;
    background-color: #3ED0F5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg-box img{
   width: 85%;
}
.questions .text{
    /*background: url('../images/bg/patient-text.png');
    background-size: 90% 100%;
    background-position: center;
    background-repeat: no-repeat;*/
    width: 38%;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 60px;
}
.questions .text p{
    padding: 28px 35px 45px 35px;
    color: #fff;
}
.accordion{
    padding: 40px;
    border-radius: 25px;
    width: 100%;
}
.accordion-body p{  
    font-family: 'Poppins', sans-serif;
}
.accordion-button{
   font-weight: 600; 
   justify-content: space-between;
}
.accordion-button:not(.collapsed){
    background-color: transparent !important;
}
.accordion-button:not(.collapsed){
    color: black !important;
}
.accordion-button:focus{
    border-color: transparent !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: url('../images/icon/mines.png') !important;
}
.accordion-button::after {
    background-image: url('../images/icon/plus.png') !important;
    margin-left: 10px;
}
.question-collapes{
    border-radius: 40px;
}
.accordion-button:not(.collapsed) {
box-shadow: none !important;
}
.accordion-button:not(.collapsed)::after {
   background-position: center;
}
.accordion-item{
    border: none ;
    margin-bottom: 30px;
    padding: 5px;
    border-radius: 30px !important;
}
.accordion-button{
    background-color: transparent !important;
}
.question a{
    margin-top: 20px;
}
.accordion-item:first-of-type .accordion-button {
    display: flex;
    justify-content: space-between;
}
/* ========= End of 1.14. questions section =========== */
/* ========= 1.15. articles section =========== */
.articles{
    padding: 100px 0px;
    background-color: #EBEBFE;
    margin: -2px 0px;
}
.articles p{
    color: #2F2F2F;
}
.articles h5{
    color: #2F2F2F;
}
.articles h2{
    padding: 0px 125px; 
    text-align: center;
    color: #2F2F2F;
}
.art-p{
    padding: 30px 170px;
    text-align: center;
}
.sugan{
    width: 100%;
}
.sugan img{
    width: 103%;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.articles .text{
    width: 100%;
    background-color: #fff;
    padding: 30px 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.articles .card1{
    background-color: #fff;
    border-radius: 30px;
}
.articles .card1 .flex-column{
  padding: 13px 15px;
}
.articles .card1{
    background-color: #fff;
    border-radius: 30px;
 
}
.articles .card1 img{
  width: 131px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
/* ========= End of 1.15. articles section =========== */
/* ========= 1.16. footer section =========== */
footer{
   padding-top: 100px;
   padding-bottom: 10px;
    background-color: #231F53;
    position: relative;
}
footer h4{
    color: #fff;
    text-align: center;
}
footer p{
    color: #fff;
    text-align: center;
}
.foot-p{
    padding: 30px 220px;
}
footer img{
    width: 202px;
}
.search{
    margin: 30px 0px;
}
.footer-nav{
    position: relative;
    margin: 30px 0px;
    padding: 30px 0px;
    background-color: rgba(123, 84, 254, 0.2);
}
.footer-nav ul{
  gap: 80px;
}
footer ul li a{
    color: #fff;
    text-decoration: none;
   border-left: 2px solid #fff;
    padding-left: 32px;
}
footer ul li a:hover{
    color: #F5B83D;
    border-left: 2px solid #F5B83D;
 
}
footer ul li:first-child a{
    border: none;
}
.social a{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #BCBCBC;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 26px;
    color: #231F53;
}
.social a:hover{
    color: #fff;
    background-color: #231F53;
    transition: 0.4s all ease-in-out;
}
.social a i{
    font-size: 26px;
}
.copy{
    padding: 10px 130px;
}
.copy a{
    text-decoration: none;
    color: #fff;
    font-size: 14px;
}
.search input{
    width: 70%;
    border: none;
    padding: 12px 20px 12px 20px;
    border-radius: 30px;
    font-size: 16px;
}
.search input:focus{
 outline: none;
}
.search{
    width: 538px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 30px;
}
.search button {
    width: 155px;
    height: 43px;
    border-radius: 30px;
    border: none;
    background-color: rgb(245, 184, 61);
    color: rgb(255, 255, 255);
    margin-top: 3px;
}
.search button:hover{
    background-color: #231F53;
    
}
/* ===form Submit massage=== */
#Succes-box{
    position: fixed;
    background-color: #fff;
    text-align: center;
    width: 60%;
    display: none;
    padding: 103px 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    top: 29%;
    z-index: 5;
    border-radius: 25px;
    left: 20%;
    box-shadow: 2px 1px 10px 7px rgba(47, 47, 47, 0.15);
}
/* ===form Subscribe massage=== */
#Succes-box2{
    position: fixed;
    background-color: #fff;
    text-align: center;
    width: 60%;
    padding: 103px 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    top: 29%;
    z-index: 5;
    border-radius: 25px;
    display: none;
    right: 20%;
    box-shadow: 2px 1px 10px 7px rgba(47, 47, 47, 0.15);
}
/* ========= End of 1.16. footer section =========== */
/* ========= 5.1. hero section =========== */
.hero-other-page h2 {
    text-align: center;
    color: #fff;
    /*padding: 120px 0px;*/
    padding: 220px 0px 120px 0px;
}
.header-hero-color2{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) -21.7%, #F7F7FF 98.88%);
}
.header-hero-color3{
    background: linear-gradient(0deg, rgba(123, 84, 254, 0.80) 11.32%, rgba(123, 84, 254, 0.00) 84.91%), linear-gradient(0deg, rgba(123, 84, 254, 0.25) 0%, rgba(123, 84, 254, 0.25) 100%);
}
.header-hero-color3 h2{
   color: #fff;
}
.header-hero-bg2{
    /*background: url('../images/bg/banner2.webp');*/
/*    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;*/
}
/* ========= End of  5.1. hero section =========== */
/* ========= 5.2. vision section =========== */
.vision{
    background-color: #fff;
    padding-bottom: 100px;
}
.vision .row{
   padding: 100px 0px;
}
.vision figure img{
    width: 75%;
    border-radius: 30px;
    z-index: 1;
}
.vision-text-bg{
    background-color: #3ED0F5;
    position: absolute;
    border-top-left-radius: 25px;
    width: 70%;
    height: 57%;
    right: 0;
    top: 2%;
}
.vision-text-bg2{
    background-color: #231F53;
    position: absolute;
    border-bottom-right-radius: 25px;
    width: 30%;
    height: 30%;
    left: 0;
    bottom: 10%;
}
.vision-div{
    padding: 15px 0px;
}
.vision p{
    padding: 15px 80px 0px 0px;
}
.vision-a{
    padding-top: 15%;
}
.phone-about{
    margin-top: 12px;
    margin-left: 15px;
}
.phone-about a{
    text-decoration: none;
    color: #2F2F2F;
}
.phone-about a:hover{
    color: #F5B83D;
}
.phone-about img{
    width: 30px;
}
.vision hr{
        color: #2F2F2F;
        opacity: 1;
        height: 2px;
        position: relative;
        left: -15px;
}
/* ========= End of 5.2. vision section =========== */
/* ========= 4.1 location section =========== */
.location{
    padding-top: 100px;
    background-color: #F7F7FF;
}
.location h2{
    padding-right: 161px;
}
.location-p{
    padding: 20px 30px 40px 0px;
}
.location .call{
   background-color: #fff; 
   width: 220px;
   height: 200px;
   border-radius: 25px;
}
.location .call p{
    padding: 25px 2px 7px 2px;
    word-break: break-all;
}
.location .call img{
    width: 37px;
}
.location .mail{
    background-color: #fff; 
    width: 220px;
    height: 200px;
    border-radius: 25px;
}
.location .mail p{
    padding: 25px 2px 7px 2px;
    word-break: break-all;
}
.location .mail img{
    width: 50px;
}
.location a{
    color: #2F2F2F !important;
    margin-top: 10px;
}
.location .map-colum{
    padding-left: 50px;
    padding-top: 60px;
}
.location h4{
    padding-bottom: 15px;
}
.location iframe{
    width: 80%;
    height: 400px;
    border-radius: 25px;
}
/* ========= End of 4.1 location section =========== */
/* ========= 8.1. testimonial section =========== */
.testimonial{
    padding: 100px 0px;
    background-color: #EBEBFE;
}
.testimonial-p{
    text-align: center;
    padding: 20px 180px;
}
.testimonial .row{
   padding-bottom: 30px;
}
.testimonial .t-bg{
  /*  background: url('../images/bg/slider-bg.png');
    background-size: 100% 75%;
    background-repeat: no-repeat;
    background-position: center;*/
}
.tesimonial-part {
    width: 93%;   
}
.tesimonial-part .text{
  padding: 20px;
  width: 60%;
  background-color: #fff;
  border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}
.tesimonial-part .text i{
    color: #F5B83D;
    padding: 10px 3px;
}
.tesimonial-part .man{
   width: 45%;
}
.tesimonial-part .man img{
   width: 100%;
    height: auto;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
}
/* ========= End of 8.1. testimonial section =========== */
/* ========= 11.1. 404 hero section =========== */
.four04{
    /*background: url('../images/bg/404-bg.webp');*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
 
}
.four04-bg{
    background: linear-gradient(0deg, rgba(123, 84, 254, 0.80) 11.32%, rgba(123, 84, 254, 0.00) 84.91%), linear-gradient(0deg, rgba(123, 84, 254, 0.25) 0%, rgba(123, 84, 254, 0.25) 100%);
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.four04-bg h2{
    color: #fff;
}
.four04-bg p{
    padding: 20px 250px;
    text-align: center;
    color: #fff;
}
.four04-bg .hover1 a{
    color: #fff;
}
/* ========= End of 11.1. 404 hero section =========== */
/* ========= 12.1. coming hero section =========== */
.coming{
   /* background: url('../images/bg/coming-bg.webp');*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
 
}
.coming-bg{
    background: linear-gradient(0deg, rgba(123, 84, 254, 0.80) 11.32%, rgba(123, 84, 254, 0.00) 84.91%), linear-gradient(0deg, rgba(123, 84, 254, 0.25) 0%, rgba(123, 84, 254, 0.25) 100%);
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.coming-bg h2{
    color: #fff;
    text-align: center;
}
.coming-bg p{
    padding: 20px 250px;
    text-align: center;
    color: #fff;
}
.coming-bg .hover1 a{
    color: #fff;
}

header {
    position: absolute;
    width: 100%;
}
/* ========= End of 12.1. coming hero section =========== */