@import url(mainstyle.css);

*{
    scroll-behavior: smooth;
    margin: 0%;
    padding: 0%;
    box-sizing: border-box; 
}
[data-gumonex-theme="dark"] .border, [data-gumonex-theme="dark"] .border-bottom, [data-gumonex-theme="dark"] .border-top, [data-gumonex-theme="dark"] .border-start, [data-gumonex-theme="dark"] .border-end{
  border-color: rgb(106, 106, 106) !important;
}

[data-gumonex-theme="dark"] [data-logo="dark"],
[data-gumonex-theme="light"] [data-logo="light"] {
    display: block;
}

[data-gumonex-theme="dark"] [data-logo="light"],
[data-gumonex-theme="light"] [data-logo="dark"] {
    display: none;
}

a{
    color: inherit;
    text-decoration: none;
} 
.icon-bg{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#btnSwitch{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

}
.navbar-toggler{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-link{
  position: relative;
  color: var(--nav-text) !important;
}
.nav-item.active .nav-link::before{
  content: ".";
  position: absolute;
  left: -5px;
  top: calc(50% - 15px);
  font-weight: bold;
}
.nav-item.active .nav-link, .nav-item:focus .nav-link, .nav-item:hover .nav-link{
  color: var(--prime-text) !important;
}
.btn-close{
  background: unset;
} 


/* banner css */
.b-card .card{
  padding: 15px;
  border-radius: 25px; 
  overflow: hidden;
}
.b-card .card .fa-circle-arrow-right{
  transform: rotate(-45deg);
}
.b-card .card:nth-child(1){
  background-color: #d5a790;
  color: #673a27;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.b-card .card:nth-child(1)::after{
  content: "";
  width: 200px;
  background: url("../../assets/images/doctor-card.png")no-repeat;
  background-size: contain;
  position: absolute;
  height: 100%;
  right: 0;
  bottom: 0; 
  background-position: right;
}
.b-card .card:nth-child(2){
  background-color: #edd0f5;
  color: #614469;
   position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.b-card .card:nth-child(2)::after{
  content: "";
  width: 200px;
  background: url("../../assets/images/doctor-card2.png")no-repeat;
  background-size: contain;
  position: absolute;
  height: 100%;
  right: 0;
  bottom: 0; 
  background-position: right;
}
.banner-main{ 
  background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../assets/images/banner.webp");
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: right center;
  min-height: 500px;
}
.banner-main .card{
  width: 33%;  
  min-height: 130px;
}
/* services section css */
.accordion-button::after {
  transform: rotate(-90deg);
  background: unset;
  content: '\f078';
  font-family: 'FontAwesome';
  color: var(--prime-text);
  margin: unset;
}
.accordion-button:not(.collapsed)::after {
  transform: rotate(0deg);
  background: unset;
  content: '\f078';
  font-family: 'FontAwesome';
  color: var(--white-text);
   margin: unset;
}

.service-main ul li .fa-circle-right{
  transform: rotate(-45deg);
}

.accordion-button{
  background-color: var(--alt-bg);
  border-radius: 10px !important;
  box-shadow: none !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--prime-text);
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  background-color: var(--prime-bg);
  color: var(--white-text);
}
.accordion-item{
  margin-bottom: 12px;
  border: 0;
  background-color: var(--alt-bg);
  border-radius: 10px !important;
}

.icon-bg-ar{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--prime-text);
  transform: rotate(-45deg);
}
.icon-bg-ar:hover{
  color: #fff;
  background-color: var(--prime-bg);
}

.accordion-flush .accordion-item:last-child{
  margin-bottom: 0;
}

/* dental section css */
.card-content{
  color: var(--prime-text);
  text-transform: capitalize;
} 

.team-content{
  color: var(--prime-text);
 background-color: var(--alt-bg);
  border-radius: 15px;
  padding: 10px;
  padding-right: 30px;
  text-transform: capitalize;
  position: absolute;
  bottom: 10px;
  left: 15px;
  width: 67%;
}

.team-btn{
  color: var(--prime-text) !important;
  background-color: var(--alt-bg);
  padding: 20px 15px;
  border-radius: 10px;
  text-transform: capitalize;
  position: absolute;
  bottom: 10px;
  right: 15px;
} 
.team-btn:hover{
  color: var(--white-text) !important;
  background-color: var(--prime-btn) !important;
}

.doctor-img img{
  height: 350px;
}

/* get in touch css */
.get-bg{
  background: url('../../assets/images/get-bg.png'),no-repeat;
  background-size: cover;
  border-radius: 30px;
}
[data-gumonex-theme="dark"] .get-bg{
  background: url('../../assets/images/get-bg2.png'),no-repeat;
}
.img-zoom{
  transform: scale(1.4);
}
 
/* footer */
.footerbg{
  background-color: unset;
}

.footer-icon-bg{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-text);
  padding: 15px;
  border: 1px solid var(--prime-border);
}
.footer-icon-bg:hover{
  color: var(--prime-text);
  background-color: var(--prime-bg);
  border: 1px solid var(--prime-border);
}

#backtotop {
    position: fixed;
    bottom: 30px;
    right: 30px; 
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    width: 50px !important;
    min-width: unset;
    height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center; 
}
#backtotop.show {
    opacity: 1;
    visibility: visible;
}
.footer-input{
  width: 360px;
  max-width: 100%;
}
@media(min-width:992px){
  .offcanvas-search {
  width: 350px;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 100px;
  transition: 0.5s ease;
  opacity: 0;
  transform: translateY(-200%); 
  visibility: hidden;
}

.header-search:hover .offcanvas-search {
  opacity: 1;
  transform: translateY(90%);
  z-index: 1; 
  visibility: visible;
}
}