@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
:root {
  --primary: #0075b1;
  --side-primary: #014161;
  --secondary: #e14b4b;
  --white: #ffffff;
  --light-grey: #f2f2f2;
  --black: #000;
}
* {
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
}
a {
  text-decoration: none !important;
}
header {
  z-index: 20;
}
.w-80 {
  width: 80%;
}
.w-85 {
  width: 85%;
}
.w-90 {
  width: 90%;
}
.w-95 {
  width: 95%;
}
/* 
  START NAVBAR SECTION
*/
.navbar {
  background-color: var(--white) !important;
  box-shadow: 0px 2px 10px var(--black);
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
  width: 85%;
  margin: auto;
  position: fixed;
  left: 8%;
}
.main-logo {
  width: 60%;
  height: auto;
  margin: 0.5rem;
}
.lp-main-logo {
  width: 60%;
  height: auto;
  margin: 0.5rem auto;
  display: flex;
  justify-content: center;
}
.redgroup-brand {
  width: fit-content !important;
}
.navbar-nav {
  max-height: 60vh !important;
}
.nav-link {
  font-size: 17px !important;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  visibility: visible;
}
.navbar .navbar-nav .nav-item {
  position: relative;
}
.navbar .navbar-nav .nav-item::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  content: "";
  background-color: var(--primary);
  width: 0%;
  height: 3px;
  transition: all 0.3s;
}
.navbar .navbar-nav .nav-item:hover::after {
  width: 80%;
}
.navbar-brand {
  width: 230px !important;
  display: inline-block;
  padding: 0;
}
.dropdown-menu {
  border-radius: 8px !important;
  padding: 0 !important;
}
.dropdown-menu[data-bs-popper] {
  right: 5% !important;
}
.dropdown-menu p {
  font-weight: 700;
  color: var(--secondary-black);
  font-size: 20px;
}
.dropdown-menu span {
  color: var(--primary-red);
}
.dropdown-item {
  font-weight: 400;
  font-size: 15px;
  white-space: normal !important;
  padding: 0.4rem 1rem;
}
.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--primary-red) !important;
  color: var(--primary-white) !important;
  border-radius: 5px !important;
}
.animate__delay-short-custom {
  animation-delay: 0.6s;
}
.web-view {
  display: block !important;
}
.mobile-view {
  display: none !important;
}

.active-link {
  border: none !important;
  border-radius: 10px;
  color: var(--white) !important;
  background-color: var(--secondary) !important;
}
.not-found-page {
  padding: 7rem 0 0 0;
}
.not-found-page h3 {
  font-weight: 700;
  font-size: 25px;
  text-align: center;
}
.not-found-wrapper {
  max-width: 35vw;
  height: auto;
  margin: auto;
}
.not-found-img {
  width: 100%;
  height: 100%;
}
.button-wrapper-not-found {
  padding: 0 0 2rem 0;
}
.not-found-button {
  background-color: var(--primary);
  color: var(--primary-white);
  padding: 0.4rem 0;
  border-radius: 15px;
  font-weight: 400;
  font-size: 23px;
  border: 1px solid var(--primary);
  width: 25%;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  position: relative;
}
.not-found-button:hover {
  background-color: var(--white);
  color: var(--primary-red);
  padding: 0.4rem 0;
  border-radius: 15px;
  font-weight: 400;
  font-size: 23px;
  border: 1px solid var(--primary);
  width: 25%;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
}
.quick-call-div {
  position: fixed;
  bottom: 1.2rem;
  width: 100%;
  left: 90%;
  z-index: 20;
}
.quick-call-btn {
  background-color: #075e54;
  color: white;
  width: 5rem;
  height: 5rem;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
}
.quick-call-btn:hover {
  background-color: white;
  color: #075e54;
  width: 5rem;
  height: 5rem;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
.quick-call-div i {
  font-size: 3rem;
  margin: 1rem auto;
}
@media screen and (max-width: 320px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    width: 100% !important;
    margin: auto !important;
    position: relative !important;
    left: 0;
  }
  .main-logo {
    width: 45% !important;
    margin: 0.7rem auto;
  }
  .nav-link {
    font-size: 11px !important;
  }
  .navbar-nav .nav-link:hover {
    width: 25%;
  }
  .navbar-nav .nav-link.active {
    width: 40%;
  }
  .btn-nav {
    font-size: 12px;
    width: 100%;
    margin: 1rem 0;
  }
  .btn-nav:hover {
    font-size: 15px;
    width: 100%;
    margin: 1rem 0;
  }
  .lang-icons {
    width: 30px !important;
    display: inline-block;
    padding: 0;
  }
  .dropdown-item {
    font-size: 13px;
  }
  .dropdown-division-wrapper {
    width: 100%;
  }
  .services-menu-wrapper ul {
    padding: 1rem !important;
  }
  .services-menu-wrapper ul li {
    font-size: 15px;
  }
  .navbar-toggler {
    font-size: 1rem !important;
  }
  .mobile-view {
    display: block !important;
  }
  .web-view {
    display: none !important;
  }
  .quick-call-div {
    left: 80%;
  }
  .quick-call-btn {
    width: 3rem;
    height: 3rem;
  }
  .quick-call-btn:hover {
    width: 3rem;
    height: 3rem;
  }
  .quick-call-div i {
    font-size: 1.5rem;
    margin: 1rem auto;
  }
}
@media screen and (min-width: 321px) and (max-width: 767px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    width: 100% !important;
    margin: auto !important;
    position: relative !important;
    left: 0;
  }
  .main-logo {
    width: 40% !important;
    margin: 0.7rem auto;
  }
  .nav-link {
    font-size: 14px !important;
  }
  .navbar-nav .nav-link:hover {
    width: 25%;
  }
  .navbar-nav .nav-link.active {
    width: 40%;
  }
  .btn-nav {
    font-size: 15px;
    width: 100%;
    margin: 1rem 0;
  }
  .btn-nav:hover {
    font-size: 15px;
    width: 100%;
    margin: 1rem 0;
  }
  .lang-icons {
    width: 32px !important;
    display: inline-block;
    padding: 0;
  }
  .dropdown-item {
    font-size: 13px;
  }
  .dropdown-division-wrapper {
    width: 100%;
  }
  .services-menu-wrapper ul {
    padding: 1rem !important;
  }
  .services-menu-wrapper ul li {
    font-size: 15px;
  }
  .services-button-navbar {
    font-size: 15px;
    padding: 0.7rem 0;
    width: 65%;
    display: block;
    margin: 1rem auto;
  }
  .services-button-navbar:hover {
    font-size: 15px;
    padding: 0.7rem 0;
    width: 65%;
    display: block;
    margin: 1rem auto;
  }
  .mobile-view {
    display: block !important;
  }
  .web-view {
    display: none !important;
  }
  .quick-call-div {
    left: 80%;
  }
  .quick-call-btn {
    width: 4rem;
    height: 4rem;
  }
  .quick-call-btn:hover {
    width: 4rem;
    height: 4rem;
  }
  .quick-call-div i {
    font-size: 2.3rem;
    margin: 1rem auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    width: 85% !important;
    margin: auto !important;
    position: relative;
    left: 0;
  }
  .main-logo {
    width: 50% !important;
    margin: 0.7rem auto;
  }
  .nav-link {
    font-size: 14px !important;
  }
  .navbar-nav .nav-link:hover {
    width: 15%;
  }
  .navbar-nav .nav-link.active {
    width: 40%;
  }
  .btn-nav {
    font-size: 15px;
    width: 100%;
    margin: 1rem 0;
  }
  .btn-nav:hover {
    font-size: 15px;
    width: 100%;
    margin: 1rem 0;
  }
  .lang-icons {
    width: 32px !important;
    display: inline-block;
    padding: 0;
  }
  .dropdown-item {
    font-size: 13px;
  }
  .dropdown-division-wrapper {
    width: 100%;
  }
  .mobile-view {
    display: block !important;
  }
  .web-view {
    display: none !important;
  }
  .quick-call-div {
    left: 85%;
  }
  .quick-call-btn {
    width: 4rem;
    height: 4rem;
  }
  .quick-call-btn:hover {
    width: 4rem;
    height: 4rem;
  }
  .quick-call-div i {
    font-size: 2.3rem;
    margin: 1rem auto;
  }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    width: 85% !important;
    margin: auto !important;
  }
  .nav-link {
    font-size: 13px !important;
    text-align: center;
  }
  .navbar-nav .nav-link.active {
    width: 100%;
  }
  .btn-nav {
    font-size: 13px;
    width: 100%;
    margin: 1rem 0;
  }
  .btn-nav:hover {
    font-size: 13px;
    width: 100%;
    margin: 1rem 0;
  }
  .quick-call-div {
    left: 90%;
  }
  .dropdown-division-wrapper {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
  .nav-link {
    font-size: 15px !important;
  }
  .btn-nav {
    font-size: 15px;
  }
  .btn-nav:hover {
    font-size: 15px;
  }
}
/* 
  END OF NAVBAR SECTION
*/
/* HOME PAGES */
.hero-section {
  height: 100%;
  background-color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 5rem 0 0 0;
}
.hero-img-wrapper {
  max-width: 100%;
  height: 100vh;
  position: relative;
  z-index: 2;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position: center; */
  object-position: 100% 50%;
  border-radius: 0 0 0 100%;
  border-left: 40px solid var(--primary);
}
.hero-left {
  width: 85%;
  margin: auto;
}
.hero-text-wrapper h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  padding: 0.5rem 0;
}
.hero-text-wrapper h2 {
  font-size: 40px;
  font-weight: 700;
  padding: 0.5rem 0;
}
.hero-text-wrapper p {
  font-size: 16px;
  font-weight: 400;
  padding: 1rem 0;
  width: 80%;
}
.hero-text span {
  display: block;
  font-size: 70px !important;
}
.hero-button button {
  background-color: var(--primary);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 35%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
}
.hero-button button:hover {
  background-color: var(--white);
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 35%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
  cursor: pointer;
}
.strength-section {
  padding: 1.5rem 0;
}
.strength-title {
  padding: 1.5rem 0;
}
.strength-title h2 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.strength-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.strength-content i {
  font-size: 100px;
  color: var(--primary);
  padding: 1rem 0;
  display: flex;
  justify-content: center;
}
.strength-content h5 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  width: 90%;
  padding: 1rem 0;
  margin: auto;
}
.services-section {
  padding: 1.5rem 0;
}
.services-title {
  padding: 1.5rem 0 0 0;
}
.services-title h2 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.services-title p {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  padding: 1.5rem 0;
}
.services-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.services-content {
  padding: 0.5rem 0;
}
.services-card {
  position: relative;
  overflow: hidden;
  color: var(--white);
  border-radius: 0px 30px 0px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 0;
}
.services-card::before,
.services-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity 0.3s ease-in-out;
}
.services-card::before {
  background: linear-gradient(150deg, rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  opacity: 1;
}
.services-card::after {
  background: linear-gradient(150deg, rgba(225, 75, 75, 1) 0%, rgba(130, 31, 31, 1) 100%);
  opacity: 0;
}
.services-card:hover::before {
  opacity: 0;
}
.services-card:hover::after {
  opacity: 1;
}
.services-img-wrapper {
  max-width: 100%;
  height: 250px;
  position: relative;
  overflow: hidden;
}
.services-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0px 30px 0px 0px;
}
.services-text-wrapper {
  padding: 2rem 1.5rem 2rem 1.5rem;
}
.services-text-wrapper h4 {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  width: 75%;
  margin: auto;
}
.services-text-wrapper p {
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  width: 75%;
  margin: auto;
  padding: 1rem 0;
}
.services-footer button {
  background-color: var(--primary);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 1rem;
  width: 100%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem auto;
}
.services-footer button:hover {
  background-color: var(--white);
  color: var(--primary);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 1rem;
  width: 100%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem auto;
  cursor: pointer;
}
.procedure-section {
  padding: 1.5rem 0;
}
.procedure-left-img-wrapper {
  max-width: 450px;
  height: 300px;
  z-index: 3;
}
.procedure-left-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  border: 5px solid var(--white);
}
.procedure-right-img-wrapper {
  max-width: 450px;
  height: 275px;
  margin: -5rem 0 0 14rem;
  position: relative;
  z-index: 4;
}
.procedure-right-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  border: 5px solid var(--white);
}
.procedure-title h2 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.procedure-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.procedure-content {
  padding: 0.5rem 0;
}
.procedure-item {
  padding: 0.8rem 0;
}
.rounded-procedure-number {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: auto;
}
.rounded-procedure-number h6 {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  margin: auto;
}
.rounded-procedure-number h6 span {
  font-size: 20px;
  font-weight: 700;
  display: contents;
}
.procedure-item h5 {
  font-size: 20px;
  font-weight: 400;
}
.branch-section {
  text-align: center;
  height: 50vh;
  display: flex;
  align-items: center;
  background: linear-gradient(150deg,rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  margin: 3rem 0;
}
.branch-bg-img {
  width: 100%;
  z-index: 0;
  height: 50vh;
  position: absolute;
  object-fit: cover;
  object-position: center;
  opacity: 0.2;
}
.branch-title {
  padding: 1.5rem 0;
}
.branch-title h2 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  color: var(--white);
}
.branch-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--white);
  margin: auto;
}
.branch-section p {
  font-size: 17px;
  font-weight: 400;
  padding: 1.5rem 0;
  color: var(--white);
}
 .doctor-home-section {
  padding: 1.5rem 0;
}
 .doctor-home-img-wrapper {
  max-width: 400px;
  height: 400px;
  margin: auto;
}
 .doctor-home-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 10px solid var(--primary);
}
.doctor-home-title h2 {
  font-size: 35px;
  font-weight: 600;
}
.doctor-home-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
}
.doctor-home-section p {
  font-size: 16px;
  font-weight: 400;
  padding: 1rem 0;
}
.doctor-home-section button {
  background-color: var(--primary);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 40%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
}
.doctor-home-section button:hover {
  background-color: var(--white);
  color: var(--primary);
  font-size: 17px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 40%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
  cursor: pointer;
}
.cta-section {
  padding: 2rem 0;
  text-align: center;
  border-radius: 0 0 50px 0;
  background-color: var(--light-grey);
}
.cta-section h3 {
  font-size: 27px;
  font-weight: 700;
}
.cta-section p {
  font-size: 16px;
  font-weight: 400;
  padding: 1rem 0 0 0;
}
.cta-section button {
  background-color: var(--primary);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 20%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
}
.cta-section button:hover {
  background-color: var(--white);
  color: var(--primary);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 20%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
  cursor: pointer;
}
.article-home-button {
  display: flex;
  justify-content: center;
}
.article-home-section button {
  background-color: var(--primary);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  padding: 0.7rem;
  width: 100%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
}
.article-home-section button:hover {
  background-color: var(--white);
  color: var(--primary);
  font-size: 17px;
  font-weight: 700;
  padding: 0.7rem;
  width: 100%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
  cursor: pointer;
}
.category-header {
  font-size: 26px !important;
}
.blue-text-result {
  color: var(--primary);
}
@media screen and (max-width: 320px) {
  .hero-section {
    padding: 7rem 0 0 0;
    height: 100%;
  }
  .hero-img-wrapper {
    max-width: 95%;
    height: 100%;
    margin: 1rem auto 0 auto;
  }
  .hero-img {
    border-radius: 6px 20px 10px 30%;
    border-left: 12px solid var(--primary);
    border-right: none;
  }
  .hero-left {
    width: 90%;
    margin: auto;
  }
  .hero-text-wrapper h1 {
    font-size: 15px;
    text-align: center;
  }
  .hero-text-wrapper h2 {
    font-size: 33px;
    padding: 0.5rem 0;
    text-align: center;
  }
  .hero-text-wrapper p {
    font-size: 15px;
    width: 80%;
    text-align: center;
    margin: auto;
  }
  .hero-button {
    display: flex;
    justify-content: center;
  }
  .hero-button button {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 0 auto;
  }
  .hero-button button:hover {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 0 auto;
  }
  .strength-section {
    padding: 1.5rem 0;
  }
  .strength-title {
    padding: 1.5rem 0;
  }
  .strength-title h2 {
    font-size: 25px;
    text-align: center;
  }
  .strength-line {
    width: 15%;
  }
  .strength-content i {
    font-size: 68px;
  }
  .strength-content h5 {
    font-size: 14px;
    width: 90%;
  }
  .services-section {
    padding: 1.5rem 0;
  }
  .services-title {
    padding: 1.5rem 0 0 0;
  }
  .services-title h2 {
    font-size: 25px;
  }
  .services-title p {
    font-size: 13px;
  }
  .services-line {
    width: 15%;
  }
  .services-content {
    padding: 0.5rem 0;
  }
  .services-text-wrapper h4 {
    font-size: 18px;
  }
  .services-text-wrapper p {
    font-size: 15px;
  }
  .services-footer button {
    font-size: 16px;
    padding: 0.7rem 1rem;
  }
  .services-footer button:hover {
    font-size: 16px;
    padding: 0.7em 1rem;
  }
  .procedure-section {
    padding: 1.5rem 0;
  }
  .procedure-left-img-wrapper {
    max-width: 100%;
    height: 220px;
    z-index: 3;
  }
  .procedure-right-img-wrapper {
    max-width: 100%;
    height: 220px;
    margin: 0 auto !important;
  }
  .procedure-title h2 {
    font-size: 25px;
    padding: 2rem 0 0 0;
  }
  .procedure-line {
    width: 15%;
  }
  .procedure-content {
    padding: 0.5rem 0;
  }
  .procedure-item {
    padding: 0.8rem 0;
  }
  .rounded-procedure-number {
    width: 30px;
    height: 30px;
  }
  .rounded-procedure-number h6 {
    font-size: 16px;
  }
  .rounded-procedure-number h6 span {
    font-size: 16px;
  }
  .procedure-item h5 {
    font-size: 14px;
  }
  .branch-section {
    margin: 2rem 0;
  }
  .margin-branch {
    margin: 25rem 0 2rem 0 !important;
  }
  .branch-title {
    padding: 1.5rem 0;
  }
  .branch-title h2 {
    font-size: 25px;
  }
  .branch-line {
    width: 15%;
  }
  .branch-section p {
    font-size: 13px;
  }
  .doctor-home-section {
    padding: 1.5rem 0;
  }
  .doctor-home-img-wrapper {
    max-width: 330px;
    height: 330px;
  }
  .doctor-home-img {
    border: 8px solid var(--primary);
  }
  .doctor-home-title h2 {
    font-size: 25px;
    text-align: center;
    padding: 1rem 0 0 0;
  }
  .doctor-home-line {
    width: 15%;
    margin: auto;
  }
  .doctor-home-section p {
    font-size: 14px;
    text-align: center;
  }
  .doctor-home-button {
    display: flex;
    justify-content: center;
  }
  .doctor-home-section button {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .doctor-home-section button:hover {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .cta-section h3 {
    font-size: 24px;
  }
  .cta-section p {
    font-size: 14px;
  }
  .cta-section button {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 80%;
    margin: 0.4rem 0;
  }
  .cta-section button:hover {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 80%;
    margin: 0.4rem 0;
  }
  .article-home-button {
    display: flex;
    justify-content: center;
  }
  .article-home-section button {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .article-home-section button:hover {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
}
@media screen and (min-width: 321px) and (max-width: 767px) {
  .hero-section {
    padding: 7rem 0 0 0;
    height: 100%;
  }
  .hero-img-wrapper {
    max-width: 95%;
    height: 100%;
    margin: 1rem auto 0 auto;
  }
  .hero-img {
    border-radius: 6px 20px 10px 30%;
    border-left: 12px solid var(--primary);
    border-right: none;
  }
  .hero-left {
    width: 90%;
    margin: auto;
  }
  .hero-text-wrapper h1 {
    font-size: 16px;
    text-align: center;
  }
  .hero-text-wrapper h2 {
    font-size: 35px;
    padding: 0.5rem 0;
    text-align: center;
  }
  .hero-text-wrapper p {
    font-size: 16px;
    width: 80%;
    text-align: center;
    margin: auto;
  }
  .hero-button {
    display: flex;
    justify-content: center;
  }
  .hero-button button {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 0 auto;
  }
  .hero-button button:hover {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 0 auto;
  }
  .strength-section {
    padding: 1.5rem 0;
  }
  .strength-title {
    padding: 1.5rem 0;
  }
  .strength-title h2 {
    font-size: 27px;
    text-align: center;
  }
  .strength-line {
    width: 15%;
  }
  .strength-content i {
    font-size: 70px;
  }
  .strength-content h5 {
    font-size: 15px;
    width: 90%;
  }
  .services-section {
    padding: 1.5rem 0;
  }
  .services-title {
    padding: 1.5rem 0 0 0;
  }
  .services-title h2 {
    font-size: 27px;
  }
  .services-title p {
    font-size: 14px;
  }
  .services-line {
    width: 15%;
  }
  .services-content {
    padding: 0.5rem 0;
  }
  .services-text-wrapper h4 {
    font-size: 20px;
  }
  .services-text-wrapper p {
    font-size: 16px;
  }
  .services-footer button {
    font-size: 17px;
    padding: 0.7rem 1rem;
  }
  .services-footer button:hover {
    font-size: 17px;
    padding: 0.7rem 1rem;
  }
  .procedure-section {
    padding: 1.5rem 0;
  }
  .procedure-left-img-wrapper {
    max-width: 100%;
    height: 230px;
    z-index: 3;
  }
  .procedure-right-img-wrapper {
    max-width: 100%;
    height: 230px;
    margin: 0 auto !important;
  }
  .procedure-title h2 {
    font-size: 27px;
    padding: 2rem 0 0 0;
  }
  .procedure-line {
    width: 15%;
  }
  .procedure-content {
    padding: 0.5rem 0;
  }
  .procedure-item {
    padding: 0.8rem 0;
  }
  .rounded-procedure-number {
    width: 30px;
    height: 30px;
  }
  .rounded-procedure-number h6 {
    font-size: 17px;
  }
  .rounded-procedure-number h6 span {
    font-size: 17px;
  }
  .procedure-item h5 {
    font-size: 15px;
  }
  .branch-section {
    margin: 2rem 0;
  }
  .margin-branch {
    margin: 25rem 0 2rem 0 !important;
  }
  .branch-title {
    padding: 1.5rem 0;
  }
  .branch-title h2 {
    font-size: 27px;
  }
  .branch-line {
    width: 15%;
  }
  .branch-section p {
    font-size: 14px;
  }
  .doctor-home-section {
    padding: 1.5rem 0;
  }
  .doctor-home-img-wrapper {
    max-width: 330px;
    height: 330px;
  }
  .doctor-home-img {
    border: 8px solid var(--primary);
  }
  .doctor-home-title h2 {
    font-size: 27px;
    text-align: center;
    padding: 1rem 0 0 0;
  }
  .doctor-home-line {
    width: 15%;
    margin: auto;
  }
  .doctor-home-section p {
    font-size: 15px;
    text-align: center;
  }
  .doctor-home-button {
    display: flex;
    justify-content: center;
  }
  .doctor-home-section button {
    font-size: 17px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .doctor-home-section button:hover {
    font-size: 17px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .cta-section h3 {
    font-size: 25px;
  }
  .cta-section p {
    font-size: 15px;
  }
  .cta-section button {
    font-size: 20px;
    padding: 0.7rem 0;
    width: 80%;
    margin: 0.4rem 0;
  }
  .cta-section button:hover {
    font-size: 20px;
    padding: 0.7rem 0;
    width: 80%;
    margin: 0.4rem 0;
  }
  .article-home-button {
    display: flex;
    justify-content: center;
  }
  .article-home-section button {
    font-size: 17px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .article-home-section button:hover {
    font-size: 17px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    padding: 8rem 0 0 0;
    height: 100%;
  }
  .hero-img-wrapper {
    max-width: 95%;
    height: 100%;
    margin: 1rem auto 0 auto;
  }
  .hero-img {
    border-radius: 6px 20px 10px 30%;
    border-left: 12px solid var(--primary);
    border-right: none;
  }
  .hero-left {
    width: 90%;
    margin: auto;
  }
  .hero-text-wrapper h1 {
    font-size: 16px;
    text-align: center;
  }
  .hero-text-wrapper h2 {
    font-size: 35px;
    padding: 0.5rem 0;
    text-align: center;
  }
  .hero-text-wrapper p {
    font-size: 16px;
    width: 80%;
    text-align: center;
    margin: auto;
  }
  .hero-button {
    display: flex;
    justify-content: center;
  }
  .hero-button button {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 0 auto;
  }
  .hero-button button:hover {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 0 auto;
  }
  .strength-section {
    padding: 1.5rem 0;
  }
  .strength-title {
    padding: 1.5rem 0;
  }
  .strength-title h2 {
    font-size: 27px;
    text-align: center;
  }
  .strength-line {
    width: 15%;
  }
  .strength-content i {
    font-size: 70px;
  }
  .strength-content h5 {
    font-size: 15px;
    width: 90%;
  }
  .services-section {
    padding: 1.5rem 0;
  }
  .services-title {
    padding: 1.5rem 0 0 0;
  }
  .services-title h2 {
    font-size: 27px;
  }
  .services-title p {
    font-size: 14px;
  }
  .services-line {
    width: 15%;
  }
  .services-content {
    padding: 0.5rem 0;
  }
  .services-text-wrapper h4 {
    font-size: 20px;
  }
  .services-text-wrapper p {
    font-size: 16px;
  }
  .services-footer button {
    font-size: 17px;
    padding: 0.7rem 1rem;
  }
  .services-footer button:hover {
    font-size: 17px;
    padding: 0.7rem 1rem;
  }
  .procedure-section {
    padding: 1.5rem 0;
  }
  .procedure-left-img-wrapper {
    max-width: 100%;
    height: 320px;
    z-index: 3;
  }
  .procedure-right-img-wrapper {
    max-width: 100%;
    height: 320px;
    margin: 0 auto !important;
  }
  .procedure-title h2 {
    font-size: 27px;
    padding: 2rem 0 0 0;
    text-align: start;
  }
  .procedure-line {
    width: 15%;
    margin: 0;
  }
  .procedure-content {
    padding: 0.5rem 0;
  }
  .procedure-item {
    padding: 0.8rem 0;
  }
  .rounded-procedure-number {
    width: 30px;
    height: 30px;
  }
  .rounded-procedure-number h6 {
    font-size: 17px;
  }
  .rounded-procedure-number h6 span {
    font-size: 17px;
  }
  .procedure-item h5 {
    font-size: 15px;
  }
  .branch-section {
    margin: 2rem 0;
    height: 35vh;
  }
  .margin-branch {
    margin: 25rem 0 2rem 0 !important;
  }
  .branch-bg-img {
    height: 35vh;
  }
  .branch-title {
    padding: 1.5rem 0;
  }
  .branch-title h2 {
    font-size: 27px;
  }
  .branch-line {
    width: 15%;
  }
  .branch-section p {
    font-size: 14px;
  }
  .doctor-home-section {
    padding: 1.5rem 0;
  }
  .doctor-home-img-wrapper {
    max-width: 330px;
    height: 330px;
  }
  .doctor-home-img {
    border: 8px solid var(--primary);
  }
  .doctor-home-title h2 {
    font-size: 27px;
    text-align: center;
    padding: 1rem 0 0 0;
  }
  .doctor-home-line {
    width: 15%;
    margin: auto;
  }
  .doctor-home-section p {
    font-size: 15px;
    text-align: center;
  }
  .doctor-home-button {
    display: flex;
    justify-content: center;
  }
  .doctor-home-section button {
    font-size: 17px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .doctor-home-section button:hover {
    font-size: 17px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .cta-section h3 {
    font-size: 25px;
  }
  .cta-section p {
    font-size: 15px;
  }
  .cta-section button {
    font-size: 20px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.4rem 0;
  }
  .cta-section button:hover {
    font-size: 20px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.4rem 0;
  }
  .article-home-button {
    display: flex;
    justify-content: center;
  }
  .article-home-section button {
    font-size: 17px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .article-home-section button:hover {
    font-size: 17px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
  .hero-section {
    height: 100%;
    padding: 5rem 0 0 0;
  }
  .hero-img-wrapper {
    height: 100vh;
  }
  .hero-text-wrapper h1 {
    font-size: 18px;
  }
  .hero-text-wrapper h2 {
    font-size: 36px;
  }
  .hero-text-wrapper p {
    font-size: 14px;
  }
  .procedure-item h5 {
    font-size: 18px;
  }
  .branch-section {
    height: 40vh;
  }
  .branch-bg-img {
    height: 40vh;
  }
  .cta-section button {
    width: 25%;
  }
  .cta-section button:hover {
    width: 25%;
  }
}
/* ========== */
/* SERVICES PAGES */
/* Services All */
.services-all-hero-section {
  text-align: center;
  height: 50vh;
  display: flex;
  align-items: center;
  background-color: var(--black);
}
.services-all-hero-img {
  width: 100%;
  z-index: 0;
  height: 50vh;
  position: absolute;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
}
.services-all-hero-section h2 {
  font-size: 30px;
  font-weight: 600;
  color: var(--white);
}
.services-all-title {
  padding: 1.5rem 0;
}
.services-all-title h3 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.services-all-title p {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  padding: 1rem 0;
  width: 80%;
  margin: auto;
}
.services-all-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.services-all-main-section {
  padding: 2rem 0;
  margin: 1rem 0;
}
.services-all-card.hover-switch {
  position: relative;
  height: 450px;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}
.services-all-card a {
  color: var(--white) !important;
}
/* Front (Image background) */
.card-front {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  color: white;
  z-index: 2;
  transition: opacity 0.4s ease;
}
.card-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  z-index: -1;
}
.card-front .overlay {
    z-index: 1;
    position: relative;
}
.card-front h4 {
  font-size: 25px;
  font-weight: 700;
}
.card-front p {
  font-size: 16px;
  font-weight: 400;
}
/* Back (Blue card) */
.card-back {
  position: absolute;
  inset: 0;
  background-color: var(--primary);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(100%);
  opacity: 0;
  z-index: 1;
  transition: all 0.4s ease;
}
.card-back h4 {
  font-size: 25px;
  font-weight: 700;
}
.card-back p {
  font-size: 16px;
  font-weight: 400;
}
.card-back i {
  font-size: 80px;
  color: var(--white);
}
/* On hover */
.services-all-card.hover-switch:hover .card-front {
    opacity: 0;
    pointer-events: none;
}
.services-all-card.hover-switch:hover .card-back {
    transform: translateY(0%);
    opacity: 1;
}
/* Services Details */
.services-hero-section {
  text-align: center;
  height: 50vh;
  display: flex;
  align-items: center;
  background-color: var(--black);
}
.z-index-container {
  z-index: 3;
}
.services-hero-img {
  width: 100%;
  z-index: 0;
  height: 50vh;
  position: absolute;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
}
.services-hero-section h2 {
  font-size: 30px;
  font-weight: 600;
  color: var(--white);
  margin: 3rem 0 0 0;
}
.services-hero-section p {
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  margin: 1rem 0 0 0;
}
.services-about-section {
  padding: 3rem 0;
  margin: 1.5rem 0;
}
.services-about-section h3 {
  font-size: 26px;
  font-weight: 600;
  width: 90%;
  padding: 0 0 0.5rem 0;
}
.services-about-line {
  width: 12%;
  height: 3px;
  border: none;
  background-color: var(--primary);
}
.services-about-content {
  padding: 1.5rem 0;
}
.services-about-section p {
  font-size: 16px;
  font-weight: 400;
  padding: 0.2rem 0;
  width: 90%;
}
.services-about-img-wrapper {
  max-width: 100%;
  height: 380px;
}
.services-about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}
.services-offer-title {
  padding: 1.5rem 0;
}
.services-offer-section h3 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.services-offer-section p {
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  padding: 0.5rem 0;
}
.services-offer-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.services-offer-content {
  padding: 0.5rem 0;
}
.services-offer-card {
  background: linear-gradient(150deg,rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  color: var(--white);
  border-radius: 0px 30px 0px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.services-offer-img-wrapper {
  max-width: 100%;
  height: 210px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease-in-out;
}
.services-offer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0px 30px 0px 0px;
  transition: 0.3s ease-in-out;
}
.services-offer-text-wrapper {
  padding: 2rem 1.5rem 2rem 1.5rem;
  height: 50%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.services-offer-text-wrapper h4 {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  width: 85%;
  margin: auto;
}
.services-offer-text-wrapper p {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}
.services-offer-img-wrapper:hover .services-offer-img {
  transform: scale(1.1);
}
.services-offer-footer {
  width: 85%;
  margin: auto;
}
.services-offer-footer p {
  font-size: 18px;
  font-weight: 500;
  padding: 1.5rem 0;
  text-align: center;
  font-style: italic;
}
.services-ideal-section {
  margin: 2rem 0;
}
.services-ideal-left-wrapper {
  max-width: 450px;
  height: 300px;
  z-index: 3;
}
.ideal-left-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  border: 5px solid var(--white);
}
.services-ideal-right-wrapper {
  max-width: 450px;
  height: 275px;
  margin: -5rem 0 0 14rem;
  position: relative;
  z-index: 4;
}
.ideal-right-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  border: 5px solid var(--white);
}
.ideal-title h3 {
  font-size: 25px;
  font-weight: 600;
}
.ideal-line {
  width: 12%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: 0 0 1rem 0;
}
.ideal-title p {
  font-size: 16px;
  font-weight: 400;
  padding: 0.5rem 0;
}
.ideal-point i {
  font-size: 25px;
  color: var(--primary);
}
.ideal-point p {
  font-size: 15px;
  font-weight: 400;
}
.ideal-footer {
  padding: 1rem 0;
}
.ideal-footer h5 {
  font-size: 28px;
  font-weight: 700;
  padding: 0.5rem 0;
}
.ideal-btn button {
  background-color: var(--primary);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 50%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 0.5rem 0;
}
.ideal-btn button:hover {
  background-color: var(--white);
  color: var(--primary);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 50%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 0.5rem 0;
  cursor: pointer;
}
.additional-services-section {
  padding: 1.5rem 0;
  background-color: var(--light-grey);
}
.additional-title {
  padding: 1.5rem 0;
}
.additional-services-section h3 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.additional-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.additional-content i {
  font-size: 100px;
  color: var(--primary);
  padding: 1rem 0;
  display: flex;
  justify-content: center;
}
.additional-content p {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  width: 90%;
  padding: 1rem 0;
  margin: auto;
}
.services-blue-box {
  padding: 2.5rem 0;
}
.blue-box-title {
  padding: 0.5rem 0;
}
.blue-box-title h3 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.blue-box-title p {
  font-size: 16px;
  font-weight: 400;
  padding: 0.5rem 0 1rem 0;
  text-align: center;
  width: 90%;
  margin: auto;
}
.blue-box-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.blue-box-card {
  background: linear-gradient(150deg,rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  color: var(--white);
  border-radius: 50px 0 50px 0;
  padding: 3rem;
  width: 90%;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blue-box-card h5 {
  font-size: 30px;
  font-weight: 600;
  padding: 0.5rem 0 1rem 0;
  text-align: center;
}
.blue-box-card p {
  font-size: 16px;
  font-weight: 400;
  margin: 0 !important;
}
.blue-box-icon {
  background-color: var(--white);
  color: var(--primary);
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 50%;
  border: 5px solid var(--primary);
  margin: 0 auto -3rem auto;
  position: relative;
  display: flex;
}
.blue-box-icon i {
  font-size: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.services-price-box-section {
  padding: 2.5rem 0;
}
.price-box-title {
  padding: 0.5rem 0;
}
.price-box-title h3 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.price-box-title p {
  font-size: 16px;
  font-weight: 400;
  padding: 0.5rem 0 1rem 0;
  text-align: center;
  width: 90%;
  margin: auto;
}
.price-box-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.price-box-wrapper {
  padding: 1.5rem 0;
}
.price-box {
  background: linear-gradient(150deg,rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  color: var(--white);
  border-radius: 0 50px 0 50px;
  border-top: 10px solid var(--secondary);
  border-bottom: 10px solid var(--secondary);
  padding: 2rem;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-box h4 {
  font-size: 26px;
  font-weight: 600;
  padding: 0.5rem 0 1rem 0;
  text-align: center;
}
.price-box ul li {
  font-size: 16px;
  font-weight: 400;
}
.price-box-wrapper h3 {
  font-size: 28px;
  font-weight: 700;
  padding: 0.5rem 0;
}
.price-box-footer p {
  font-size: 26px;
  font-weight: 600;
  padding: 1rem 0;
  text-align: center;
}
.services-special-branch {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
}
.special-branch-left-text {
  display: flex;
  justify-content: center;
}
.special-branch-left-text p {
  font-size: 20px;
  font-weight: 400;
  width: 90%;
  color: var(--white);
}
.special-branch-title {
  padding: 1rem 0;
}
.special-branch-title h5 {
  font-size: 25px;
  font-weight: 600;
  text-align: center;
  color: var(--white);
}
.special-branch-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.special-branch-maps {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: auto;
}
.special-branch-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.special-branch-text {
  background-color: var(--primary);
  padding: 1rem;
  color: var(--white);
  border-radius: 15px;
  margin: -2rem auto 0 auto;
  width: 80%;
  position: relative;
  box-shadow: 2px 3px 12px var(--black);
  height: 50%;
}
.special-branch-text {
  text-align: center;
}
.special-branch-text h6 {
  font-weight: 700;
  font-size: 16px;
}
.special-branch-text p {
  font-size: 14px;
  font-weight: 400;
  padding: 1rem 0;
}
.landscape-box-section {
  padding: 1.5rem 0;
  margin: 1.5rem 0;
}
.landscape-title {
  padding: 0.5rem 0;
}
.landscape-title h3 {
  font-size: 30px;
  font-weight: 600;
}
.landscape-card {
  background-color: #BFEAFF;
  border-radius: 12px;
  padding: 1rem;
  margin: 0.5rem 0;
  transition: 0.3s ease-in-out;
}
.landscape-card:hover {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 12px;
  padding: 1rem;
  margin: 0.5rem 0;
  transition: 0.3s ease-in-out;
}
.landscape-img-wrapper {
  max-width: 100%;
  height: 100px;
}
.landscape-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}
.landscape-card h5 {
  font-size: 18px;
  font-weight: 700;
}
.landscape-footer p {
  font-size: 20px;
  text-align: center;
  width: 90%;
  margin: 1rem auto;
}
.floating-box-section {
  padding: 6rem 0 4rem 0;
}
.floating-box-bg {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: 0% 20%;
}
.floating-box-title {
  padding: 0.5rem 0;
}
.floating-box-title h2 {
  font-size: 25px;
  font-weight: 700;
  padding: 0.2rem 0;
  text-align: center;
}
.floating-box-line {
  width: 12%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: 0 auto 0.8rem auto;
}
.floating-box {
  width: 60%;
  height: 100%;
  border-radius: 15px;
  margin: 0 auto;
  padding: 2.5rem;
  position: relative;
  z-index: 8;
  background-color: var(--white);
  box-shadow: 9px 8px 19px -1px rgba(0,0,0,0.75);
}
.floating-shadow-box {
  background: linear-gradient(150deg,rgba(0, 117, 177, 0.95) 0%, rgba(1, 65, 97, 0.95) 100%);
  width: 63%;
  height: 410px;
  z-index: 4;
  margin: -24rem auto 0 auto;
  border-radius: 15px;
}
.floating-box-content {
  display: flex;
  justify-content: center;
  width: 100%;
}
.floating-box p {
  font-size: 15px;
}
.floating-box i {
  color: var(--primary);
  font-size: 23px;
}
.procedure-special-section {
  padding: 1rem 0;
  margin: 1rem 0;
}
.procedure-special-title {
  padding: 1rem 0;
}
.procedure-special-title h3 {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
}
.procedure-special-content {
  padding: 0.5rem 0;
}
.procedure-special-content h4 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 0;
}
.procedure-special-number {
  background-color: var(--black);
  color: var(--white);
  border-radius: 50%;
  padding: 1rem;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -1.5rem auto 1rem auto;
  position: relative;
  transition: 0.3s ease-in-out;
}
.procedure-special-number:hover {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 50%;
  padding: 1rem;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -1.5rem auto 1rem auto;
  position: relative;
  transition: 0.3s ease-in-out;
}
.procedure-special-number span {
  font-size: 18px;
  font-weight: 600;
}
.procedure-special-img-wrapper {
  max-width: 200px;
  height: 200px;
}
.procedure-special-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  box-shadow: 3px 7px 14px 0px #3a3a3aa8;
  border-right: 5px solid var(--primary);
  border-bottom: 8px solid var(--primary);
}
.procedure-special-content i {
  font-size: 30px;
}
.arrow-img {
  width: 100%;
  height: auto;
  margin: 3rem auto 0 auto;
}
.services-cta-special {
  padding: 1rem 0 0 0;
  background-color: var(--light-grey);
  margin: 7rem 0 0 0;
}
.doctor-cta-img {
  width: 80%;
  height: auto;
  position: relative;
  margin: -7rem auto 0 auto;
}
.area-large-section {
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
  margin: 6rem 0 4rem 0;
}
.area-large-box {
  width: 80%;
  height: 400px;
  margin: auto;
  padding: 3rem;
  border-radius: 10px 50px 10px 50px;
  background: linear-gradient(150deg,rgba(0, 117, 177, 0.95) 0%, rgba(1, 65, 97, 0.95) 100%);
  color: var(--black);
}
.area-large-title h3 {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  padding: 0 0 1rem 0;
  color: var(--white);
}
.area-large-box i {
  font-size: 26px;
  color: var(--secondary);
}
.area-large-box h6 {
  font-size: 23px;
  font-weight: 600;
  color: var(--white);
}
.services-cta-special h3 {
  font-size: 27px;
  font-weight: 700;
}
.services-cta-special p {
  font-size: 16px;
  font-weight: 400;
  padding: 1rem 0 0 0;
}
.services-cta-special button {
  background-color: var(--primary);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 20%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
}
.services-cta-special button:hover {
  background-color: var(--white);
  color: var(--primary);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 20%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
  cursor: pointer;
}
.services-cta-basic {
  padding: 2rem 0;
  background-color: var(--light-grey);
  margin: 3rem 0 0 0;
  text-align: center;
}
.services-cta-basic h3 {
  font-size: 27px;
  font-weight: 700;
  text-align: center;
}
.services-cta-basic p {
  font-size: 16px;
  font-weight: 400;
  padding: 1rem 0 0 0;
  text-align: center;
  width: 80%;
  margin: auto;
}
.services-cta-basic button {
  background-color: var(--primary);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 20%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
}
.services-cta-basic button:hover {
  background-color: var(--white);
  color: var(--primary);
  font-size: 20px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 20%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  margin: 1rem 0;
  cursor: pointer;
}
.sub-services-section {
  padding: 1.5rem 0;
}
.sub-services-img-wrapper {
  max-width: 90%;
  height: 460px;
}
.sub-services-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  border: 5px solid var(--white);
}
.sub-services-title {
  padding: 0 0 1rem 0;
}
.sub-services-title h3 {
  font-size: 25px;
  font-weight: 600;
}
.sub-services-line {
  width: 12%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.sub-services-point i {
  font-size: 25px;
  color: var(--primary);
}
.sub-services-point p {
  font-size: 16px;
  font-weight: 400;
}
.sub-services-footer p {
  font-size: 16px;
  font-weight: 400;
  padding: 1rem 0;
}
@media screen and (max-width: 320px) {
  .services-all-hero-section {
    height: 40vh;
  }
  .services-all-hero-img {
    height: 40vh;
  }
  .services-all-hero-section h2 {
    font-size: 25px;
    margin: 3rem 0 0 0;
  }
  .services-all-title h3 {
    font-size: 28px;
  }
  .services-all-title p {
    font-size: 15px;
  }
  .services-all-line {
    width: 15%;
  }
  .services-all-card.hover-switch {
    height: 300px;
  }
  /* Front (Image background) */
  .card-front {
    padding: 1rem;
  }
  .card-front h4 {
    font-size: 22px;
  }
  .card-front p {
    font-size: 14px;
  }
  /* Back (Blue card) */
  .card-back h4 {
    font-size: 22px;
  }
  .card-back p {
    font-size: 14px;
  }
  .card-back i {
    font-size: 60px;
  }
  /* Services Details */
  .services-hero-section {
    height: 40vh;
  }
  .services-hero-img {
    height: 40vh;
  }
  .services-hero-section h2 {
    font-size: 26px;
    margin: 3rem 0 0 0;
  }
  .services-about-section h3 {
    font-size: 23px;
  }
  .services-about-line {
    width: 12%;
  }
  .services-about-section p {
    font-size: 14px;
  }
  .services-about-img-wrapper {
    height: 250px;
  }
  .services-offer-section h3 {
    font-size: 30px;
  }
  .services-offer-section p {
    font-size: 14px;
  }
  .services-offer-line {
    width: 15%;
  }
  .services-offer-img-wrapper {
    height: 230px;
  }
  .services-offer-text-wrapper h4 {
    font-size: 17px;
    width: 95%;
  }
  .services-offer-text-wrapper p {
    font-size: 14px;
  }
  .services-offer-footer {
    width: 85%;
    margin: auto;
  }
  .services-offer-footer p {
    font-size: 14px;
  }
  .services-ideal-section {
    margin: 2rem auto;
    width: 90%;
  }
  .services-ideal-left-wrapper {
    max-width: 100%;
    height: 230px;
    z-index: 3;
  }
  .services-ideal-right-wrapper {
    max-width: 100%;
    height: 230px;
    margin: 1rem 0;
  }
  .ideal-title h3 {
    font-size: 22px;
  }
  .ideal-line {
    width: 12%;
  }
  .ideal-title p {
    font-size: 14px;
  }
  .ideal-point i {
    font-size: 23px;
  }
  .ideal-point p {
    font-size: 14px;
  }
  .ideal-footer h5 {
    font-size: 25px;
    text-align: center;
  }
  .ideal-btn button {
    font-size: 17px;
    width: 50%;
    display: flex;
    justify-content: center;
    margin: auto;
  }
  .ideal-btn button:hover {
    font-size: 17px;
    font-weight: 700;
    width: 50%;
    display: flex;
    justify-content: center;
    margin: auto;
  }
  .additional-services-section h3 {
    font-size: 28px;
  }
  .additional-line {
    width: 12%;
  }
  .additional-content i {
    font-size: 70px;
  }
  .additional-content p {
    font-size: 14px;
  }
  .blue-box-title h3 {
    font-size: 28px;
  }
  .blue-box-title p {
    font-size: 14px;
    padding: 1rem 0;
  }
  .blue-box-line {
    width: 15%;
  }
  .blue-box-card {
    padding: 2.5rem;
    width: 100%;
  }
  .blue-box-card h5 {
    font-size: 34px;
    text-align: center;
  }
  .blue-box-card p {
    font-size: 14px;
  }
  .services-special-branch {
    height: 100%;
  }
  .special-branch-left-text p {
    font-size: 15px;
    text-align: center;
    padding: 1rem 0;
  }
  .special-branch-title h5 {
    font-size: 22px;
  }
  .special-branch-line {
    width: 15%;
  }
  .special-branch-maps {
    padding-bottom: 70%;
  }
  .special-branch-text {
    margin: -2rem auto 1rem auto;
    width: 80%;
    height: 40%;
  }
  .special-branch-text h6 {
    font-size: 15px;
  }
  .special-branch-text p {
    font-size: 14px;
  }
  .services-cta-special {
    margin: 0;
    padding: 2rem 0;
  }
  .doctor-cta-img {
    margin: 0;
    display: none;
  }
  .services-cta-special h3 {
    font-size: 24px;
    text-align: center;
  }
  .services-cta-special p {
    font-size: 14px;
    text-align: center;
  }
  .services-cta-special button {
    font-size: 17px;
    width: 50%;
    margin: 2rem auto 1rem auto;
    display: flex;
    justify-content: center;
  }
  .services-cta-special button:hover {
    font-size: 17px;
    width: 50%;
    margin: 2rem auto 1rem auto;
    display: flex;
    justify-content: center;
  }
}
@media screen and (min-width: 321px) and (max-width: 767px) {
  .services-all-hero-section {
    height: 40vh;
  }
  .services-all-hero-img {
    height: 40vh;
  }
  .services-all-hero-section h2 {
    font-size: 27px;
    margin: 3rem 0 0 0;
  }
  .services-all-title h3 {
    font-size: 30px;
  }
  .services-all-title p {
    font-size: 16px;
  }
  .services-all-line {
    width: 15%;
  }
  .services-all-card.hover-switch {
    height: 300px;
  }
  /* Front (Image background) */
  .card-front {
    padding: 1rem;
  }
  .card-front h4 {
    font-size: 23px;
  }
  .card-front p {
    font-size: 15px;
  }
  /* Back (Blue card) */
  .card-back h4 {
    font-size: 23px;
  }
  .card-back p {
    font-size: 15px;
  }
  .card-back i {
    font-size: 60px;
  }
  /* Services Details */
  .services-hero-section {
    height: 40vh;
  }
  .services-hero-img {
    height: 40vh;
  }
  .services-hero-section h2 {
    font-size: 27px;
    margin: 3rem 0 0 0;
  }
  .services-about-section h3 {
    font-size: 24px;
  }
  .services-about-line {
    width: 12%;
  }
  .services-about-section p {
    font-size: 15px;
  }
  .services-about-img-wrapper {
    height: 250px;
  }
  .services-offer-section h3 {
    font-size: 30px;
  }
  .services-offer-section p {
    font-size: 16px;
  }
  .services-offer-line {
    width: 15%;
  }
  .services-offer-img-wrapper {
    height: 230px;
  }
  .services-offer-text-wrapper h4 {
    font-size: 20px;
    width: 95%;
  }
  .services-offer-text-wrapper p {
    font-size: 15px;
  }
  .services-offer-footer {
    width: 85%;
    margin: auto;
  }
  .services-offer-footer p {
    font-size: 15px;
  }
  .services-ideal-section {
    margin: 2rem auto;
    width: 90%;
  }
  .services-ideal-left-wrapper {
    max-width: 100%;
    height: 230px;
    z-index: 3;
  }
  .services-ideal-right-wrapper {
    max-width: 100%;
    height: 230px;
    margin: 1rem 0;
  }
  .ideal-title h3 {
    font-size: 23px;
  }
  .ideal-line {
    width: 12%;
  }
  .ideal-title p {
    font-size: 15px;
  }
  .ideal-point i {
    font-size: 23px;
  }
  .ideal-point p {
    font-size: 14px;
  }
  .ideal-footer h5 {
    font-size: 26px;
    text-align: center;
  }
  .ideal-btn button {
    font-size: 18px;
    width: 50%;
    display: flex;
    justify-content: center;
    margin: auto;
  }
  .ideal-btn button:hover {
    font-size: 18px;
    font-weight: 700;
    width: 50%;
    display: flex;
    justify-content: center;
    margin: auto;
  }
  .additional-services-section h3 {
    font-size: 30px;
  }
  .additional-line {
    width: 12%;
  }
  .additional-content i {
    font-size: 70px;
  }
  .additional-content p {
    font-size: 15px;
  }
  .blue-box-title h3 {
    font-size: 30px;
  }
  .blue-box-title p {
    font-size: 15px;
    padding: 1rem 0;
  }
  .blue-box-line {
    width: 15%;
  }
  .blue-box-card {
    padding: 2.5rem;
    width: 100%;
  }
  .blue-box-card h5 {
    font-size: 35px;
    text-align: center;
  }
  .blue-box-card p {
    font-size: 15px;
  }
  .price-box-title h3 {
    font-size: 30px;
  }
  .price-box-title p {
    font-size: 15px;
  }
  .price-box-line {
    width: 15%;
  }
  .price-box {
    padding: 1.5rem;
  }
  .price-box h4 {
    font-size: 23px;
  }
  .price-box ul li {
    font-size: 13px;
  }
  .price-box-wrapper h3 {
    font-size: 26px;
  }
  .price-box-wrapper button {
    font-size: 18px;
    width: 80%;
  }
  .price-box-wrapper button:hover {
    font-size: 18px;
    width: 80%;
  }
  .price-box-footer p {
    font-size: 23px;
  }
  .services-special-branch {
    height: 100%;
  }
  .special-branch-left-text p {
    font-size: 16px;
    text-align: center;
    padding: 1rem 0;
  }
  .special-branch-title h5 {
    font-size: 23px;
  }
  .special-branch-line {
    width: 15%;
  }
  .special-branch-maps {
    padding-bottom: 70%;
  }
  .special-branch-text {
    margin: -2rem auto 1rem auto;
    width: 80%;
    height: 40%;
  }
  .special-branch-text h6 {
    font-size: 16px;
  }
  .special-branch-text p {
    font-size: 15px;
  }
  .services-cta-special {
    margin: 0;
    padding: 2rem 0;
  }
  .doctor-cta-img {
    margin: 0;
    display: none;
  }
  .services-cta-special h3 {
    font-size: 25px;
    text-align: center;
  }
  .services-cta-special p {
    font-size: 15px;
    text-align: center;
  }
  .services-cta-special button {
    font-size: 18px;
    width: 50%;
    margin: 2rem auto 1rem auto;
    display: flex;
    justify-content: center;
  }
  .services-cta-special button:hover {
    font-size: 18px;
    width: 50%;
    margin: 2rem auto 1rem auto;
    display: flex;
    justify-content: center;
  }
  .floating-box-bg {
    display: none;
  }
  .floating-box-line {
    width: 15%;
  }
  .floating-box {
    width: 100%;
    margin: 1rem 0;
    padding: 1rem;
    float: left;
    border: none;
    box-shadow: 9px 8px 19px -1px rgba(0,0,0,0.75);
  }
  .floating-shadow-box {
    display: none;
  }
  .procedure-special-title h3 {
    font-size: 35px;
  }
  .procedure-special-content h4 {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 0;
    width: 90%;
    margin: 0 auto 1.5rem auto;
  }
  .procedure-special-number:hover {
    margin: -1.5rem auto 1rem auto;
  }
  .procedure-special-number span {
    font-size: 18px;
    font-weight: 600;
  }
  .procedure-special-img-wrapper {
    margin: auto;
  }
  .arrow-img {
    display: none;
  }
  .area-large-section {
    height: 100%;
  }
  .area-large-box {
    width: 90%;
    height: 100%;
    background: linear-gradient(150deg,rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  }
  .services-cta-basic button {
    width: 60%;
  }
  .services-cta-basic button:hover {
    width: 60%;
  }
  .sub-services-img-wrapper {
    max-width: 100%;
    height: 320px;
  }
  .sub-services-title {
    padding: 1rem 0;
    text-align: center;
  }
  .sub-services-title h3 {
    font-size: 22px;
    font-weight: 600;
  }
  .sub-services-line {
    width: 15%;
  }
  .sub-services-point i {
    font-size: 23px;
  }
  .sub-services-point p {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .services-all-hero-section {
    height: 45vh;
  }
  .services-all-hero-img {
    height: 45vh;
  }
  .services-all-hero-section h2 {
    font-size: 28px;
    margin: 3rem 0 0 0;
  }
  .services-all-title h3 {
    font-size: 32px;
  }
  .services-all-title p {
    font-size: 16px;
  }
  .services-all-line {
    width: 15%;
  }
  .services-all-card.hover-switch {
    height: 300px;
  }
  /* Front (Image background) */
  .card-front {
    padding: 1rem;
  }
  .card-front h4 {
    font-size: 24px;
  }
  .card-front p {
    font-size: 16px;
  }
  /* Back (Blue card) */
  .card-back h4 {
    font-size: 24px;
  }
  .card-back p {
    font-size: 16px;
  }
  .card-back i {
    font-size: 60px;
  }
  /* Services Details */
  .services-hero-section {
    height: 45vh;
  }
  .services-hero-img {
    height: 45vh;
  }
  .services-hero-section h2 {
    font-size: 28px;
    margin: 3rem 0 0 0;
  }
  .services-about-section h3 {
    font-size: 25px;
  }
  .services-about-line {
    width: 12%;
  }
  .services-about-section p {
    font-size: 16px;
  }
  .services-about-img-wrapper {
    height: 320px;
  }
  .services-offer-section h3 {
    font-size: 32px;
  }
  .services-offer-section p {
    font-size: 16px;
  }
  .services-offer-line {
    width: 15%;
  }
  .services-offer-img-wrapper {
    height: 320px;
  }
  .services-offer-text-wrapper h4 {
    font-size: 21px;
    width: 95%;
  }
  .services-offer-text-wrapper p {
    font-size: 16px;
  }
  .services-offer-footer {
    width: 85%;
    margin: auto;
  }
  .services-offer-footer p {
    font-size: 16px;
  }
  .services-ideal-section {
    margin: 2rem auto;
    width: 90%;
  }
  .services-ideal-left-wrapper {
    max-width: 100%;
    height: 300px;
    z-index: 3;
  }
  .services-ideal-right-wrapper {
    max-width: 100%;
    height: 300px;
    margin: 1rem 0;
  }
  .ideal-title h3 {
    font-size: 24px;
  }
  .ideal-line {
    width: 12%;
  }
  .ideal-title p {
    font-size: 16px;
  }
  .ideal-point i {
    font-size: 23px;
  }
  .ideal-point p {
    font-size: 15px;
  }
  .ideal-footer h5 {
    font-size: 27px;
    text-align: center;
  }
  .ideal-btn button {
    font-size: 18px;
    width: 50%;
    display: flex;
    justify-content: center;
    margin: auto;
  }
  .ideal-btn button:hover {
    font-size: 18px;
    font-weight: 700;
    width: 50%;
    display: flex;
    justify-content: center;
    margin: auto;
  }
  .additional-services-section h3 {
    font-size: 32px;
  }
  .additional-line {
    width: 12%;
  }
  .additional-content i {
    font-size: 70px;
  }
  .additional-content p {
    font-size: 16px;
  }
  .blue-box-title h3 {
    font-size: 32px;
  }
  .blue-box-title p {
    font-size: 16px;
    padding: 1rem 0;
  }
  .blue-box-line {
    width: 15%;
  }
  .blue-box-card {
    padding: 2.5rem;
    width: 100%;
  }
  .blue-box-card h5 {
    font-size: 35px;
    text-align: center;
  }
  .blue-box-card p {
    font-size: 16px;
  }
  .price-box-title h3 {
    font-size: 30px;
  }
  .price-box-title p {
    font-size: 15px;
  }
  .price-box-line {
    width: 15%;
  }
  .price-box {
    padding: 1.5rem;
  }
  .price-box h4 {
    font-size: 23px;
  }
  .price-box ul li {
    font-size: 13px;
  }
  .price-box-wrapper h3 {
    font-size: 26px;
  }
  .price-box-wrapper button {
    font-size: 18px;
    width: 80%;
  }
  .price-box-wrapper button:hover {
    font-size: 18px;
    width: 80%;
  }
  .price-box-footer p {
    font-size: 23px;
  }
  .services-special-branch {
    height: 100%;
  }
  .special-branch-left-text p {
    font-size: 16px;
    text-align: center;
    padding: 1rem 0;
  }
  .special-branch-title h5 {
    font-size: 23px;
  }
  .special-branch-line {
    width: 15%;
  }
  .special-branch-maps {
    padding-bottom: 70%;
  }
  .special-branch-text {
    margin: -2rem auto 1rem auto;
    width: 80%;
    height: 20%;
  }
  .special-branch-text h6 {
    font-size: 16px;
  }
  .special-branch-text p {
    font-size: 16px;
  }
  .services-cta-special {
    margin: 0;
    padding: 2rem 0;
  }
  .doctor-cta-img {
    margin: 0;
    display: none;
  }
  .services-cta-special h3 {
    font-size: 25px;
    text-align: center;
  }
  .services-cta-special p {
    font-size: 16px;
    text-align: center;
  }
  .services-cta-special button {
    font-size: 18px;
    width: 50%;
    margin: 2rem auto 1rem auto;
    display: flex;
    justify-content: center;
  }
  .services-cta-special button:hover {
    font-size: 18px;
    width: 50%;
    margin: 2rem auto 1rem auto;
    display: flex;
    justify-content: center;
  }
  .floating-box-bg {
    display: none;
  }
  .floating-box-line {
    width: 15%;
  }
  .floating-box {
    width: 100%;
    margin: 1rem 0;
    padding: 1rem;
    float: left;
    border: none;
    box-shadow: 9px 8px 19px -1px rgba(0,0,0,0.75);
  }
  .floating-shadow-box {
    display: none;
  }
  .procedure-special-title h3 {
    font-size: 35px;
  }
  .procedure-special-content h4 {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 0;
    width: 90%;
    margin: 0 auto 1.5rem auto;
  }
  .procedure-special-number:hover {
    margin: -1.5rem auto 1rem auto;
  }
  .procedure-special-number span {
    font-size: 18px;
    font-weight: 600;
  }
  .procedure-special-img-wrapper {
    margin: auto;
  }
  .arrow-img {
    display: none;
  }
  .area-large-section {
    height: 100%;
  }
  .area-large-box {
    width: 90%;
    height: 100%;
    background: linear-gradient(150deg,rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  }
  .services-cta-basic button {
    width: 60%;
  }
  .services-cta-basic button:hover {
    width: 60%;
  }
  .sub-services-img-wrapper {
    max-width: 100%;
    height: 380px;
  }
  .sub-services-title {
    padding: 1rem 0;
  }
  .sub-services-title h3 {
    font-size: 22px;
    font-weight: 600;
  }
  .sub-services-line {
    width: 15%;
  }
  .sub-services-point i {
    font-size: 23px;
  }
  .sub-services-point p {
    font-size: 14px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
  .services-all-hero-section {
    height: 35vh;
  }
  .services-all-hero-img {
    height: 35vh;
  }
  .services-hero-section {
    height: 35vh;
  }
  .services-hero-img {
    height: 35vh;
  }
  .services-ideal-right-wrapper {
    margin: -5rem 0 0 5rem;
  }
  .doctor-cta-img {
    width: 80%;
    height: auto;
    position: relative;
    margin: -6rem auto 0 auto;
  }
}
/* ABOUT PAGE */
.about-hero-section {
  text-align: center;
  height: 50vh;
  display: flex;
  align-items: center;
  background-color: var(--black);
}
.about-hero-img {
  width: 100%;
  z-index: 0;
  height: 50vh;
  position: absolute;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
}
.about-hero-section h2 {
  font-size: 30px;
  font-weight: 600;
  color: var(--white);
}
.about-main-section {
  padding: 1.5rem 0;
}
.about-main-upper-content {
  padding: 1.5rem 0;
}
.about-main-lower-content {
  padding: 1.5rem 0;
}
.about-main-title {
  padding: 1.5rem 0;
}
.about-main-title h3 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.about-main-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.about-main-section p {
  font-size: 16px;
  font-weight: 400;
}
.italic-blue {
  padding: 0.5rem 0;
  font-style: italic;
  color: var(--primary);
  font-weight: 700 !important;
}
.about-main-section ul li {
  font-size: 16px;
  font-weight: 400;
}
.wide-about-img-wrapper {
  max-width: 100%;
  height: 520px;
}
.upper-image-wrapper {
  max-width: 100%;
  height: 250px;
  margin: 0 0 1rem 0;
}
.lower-image-wrapper {
  max-width: 100%;
  height: 250px;
  margin: 1rem 0 0 0;
}
.wide-about-img, .upper-img, .lower-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}
.about-main-left-wrapper {
  max-width: 450px;
  height: 250px;
  margin: 0 0 0 14rem;
}
.about-main-right-wrapper {
  max-width: 450px;
  height: 250px;
  margin: -5rem 0 0 0;
  position: relative;
  z-index: 4;
}
.about-left-img, .about-right-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  border: 5px solid var(--white);
}
.about-branch-section {
  padding: 1.5rem 0;
}
.about-branch-title {
  padding: 1.5rem 0;
}
.about-branch-title h3 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.about-branch-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.about-branch-maps {
  position: relative;
  width: 80%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: auto;
}
.about-branch-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.about-branch-text {
  background-color: var(--primary);
  padding: 1rem;
  color: var(--white);
  border-radius: 15px;
  margin: -2rem auto 0 auto;
  width: 60%;
  position: relative;
  box-shadow: 2px 3px 12px var(--black);
}
.about-branch-section {
  text-align: center;
}
.about-branch-section h6 {
  font-weight: 700;
  font-size: 18px;
}
.about-branch-section p {
  font-size: 16px;
  font-weight: 400;
  padding: 1rem 0;
}
@media screen and (max-width: 320px) {
  .about-hero-section {
    height: 40vh;
  }
  .about-hero-img {
    height: 40vh;
  }
  .about-hero-section h2 {
    font-size: 25px;
    padding: 3rem 0 0 0;
  }
  .about-main-section {
    padding: 1.5rem 0;
  }
  .about-main-upper-content {
    padding: 1.5rem 0;
  }
  .about-main-lower-content {
    padding: 1.5rem 0;
  }
  .about-main-title {
    padding: 1.5rem 0;
  }
  .about-main-title h3 {
    font-size: 28px;
  }
  .about-main-line {
    width: 15%;
    margin: auto;
  }
  .about-main-section p {
    font-size: 14px;
    padding: 0.5rem 0;
    width: 90%;
    margin: auto;
  }
  .about-main-section ul li {
    font-size: 14px;
    padding: 0.5rem 0;
    width: 90%;
    margin: auto;
  }
  .wide-about-img-wrapper {
    display: none;
  }
  .upper-image-wrapper {
    height: 220px;
    margin: 0;
  }
  .lower-image-wrapper {
    height: 220px;
    margin: 0.5rem 0;
  }
  .about-main-left-wrapper {
    max-width: 100%;
    height: 220px;
    margin: 0.5rem 0;
  }
  .about-main-right-wrapper {
    max-width: 100%;
    height: 230px;
    margin: 0;
  }
  .about-branch-section {
    padding: 1.5rem 0;
  }
  .about-branch-title {
    padding: 1.5rem 0;
  }
  .about-branch-title h3 {
    font-size: 28px;
  }
  .about-branch-line {
    width: 15%;
    margin: auto;
  }
  .about-branch-maps {
    width: 90%;
    padding-bottom: 70%;
  }
  .about-branch-text {
    margin: -2rem auto 1rem auto;
    width: 80%;
  }
  .about-branch-section {
    text-align: center;
  }
  .about-branch-section h6 {
    font-size: 15px;
  }
  .about-branch-section p {
    font-size: 14px;
  }
}
@media screen and (min-width: 321px) and (max-width: 767px) {
  .about-hero-section {
    height: 40vh;
  }
  .about-hero-img {
    height: 40vh;
  }
  .about-hero-section h2 {
    font-size: 27px;
    padding: 3rem 0 0 0;
  }
  .about-main-section {
    padding: 1.5rem 0;
  }
  .about-main-upper-content {
    padding: 1.5rem 0;
  }
  .about-main-lower-content {
    padding: 1.5rem 0;
  }
  .about-main-title {
    padding: 1.5rem 0;
  }
  .about-main-title h3 {
    font-size: 30px;
  }
  .about-main-line {
    width: 15%;
    margin: auto;
  }
  .about-main-section p {
    font-size: 15px;
    padding: 0.5rem 0;
    width: 90%;
    margin: auto;
  }
  .about-main-section ul li {
    font-size: 15px;
    padding: 0.5rem 0;
    width: 90%;
    margin: auto;
  }
  .wide-about-img-wrapper {
    display: none;
  }
  .upper-image-wrapper {
    height: 220px;
    margin: 0;
  }
  .lower-image-wrapper {
    height: 220px;
    margin: 0.5rem 0;
  }
  .about-main-left-wrapper {
    max-width: 100%;
    height: 220px;
    margin: 0.5rem 0;
  }
  .about-main-right-wrapper {
    max-width: 100%;
    height: 230px;
    margin: 0;
  }
  .about-branch-section {
    padding: 1.5rem 0;
  }
  .about-branch-title {
    padding: 1.5rem 0;
  }
  .about-branch-title h3 {
    font-size: 30px;
  }
  .about-branch-line {
    width: 15%;
    margin: auto;
  }
  .about-branch-maps {
    width: 90%;
    padding-bottom: 70%;
  }
  .about-branch-text {
    margin: -2rem auto 1rem auto;
    width: 80%;
  }
  .about-branch-section {
    text-align: center;
  }
  .about-branch-section h6 {
    font-size: 16px;
  }
  .about-branch-section p {
    font-size: 15px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .about-hero-section {
    height: 45vh;
  }
  .about-hero-img {
    height: 45vh;
  }
  .about-hero-section h2 {
    font-size: 28px;
    padding: 3rem 0 0 0;
  }
  .about-main-section {
    padding: 1.5rem 0;
  }
  .about-main-upper-content {
    padding: 1.5rem 0;
  }
  .about-main-lower-content {
    padding: 1.5rem 0;
  }
  .about-main-title {
    padding: 1.5rem 0;
  }
  .about-main-title h3 {
    font-size: 32px;
  }
  .about-main-line {
    width: 15%;
    margin: auto;
  }
  .about-main-section p {
    font-size: 16px;
    padding: 0.5rem 0;
    width: 90%;
    margin: auto;
  }
  .about-main-section ul li {
    font-size: 16px;
    padding: 0.5rem 0;
    width: 90%;
    margin: auto;
  }
  .wide-about-img-wrapper {
    display: none;
  }
  .upper-image-wrapper {
    height: 270px;
    margin: 0;
  }
  .lower-image-wrapper {
    height: 270px;
    margin: 0.5rem 0;
  }
  .about-main-left-wrapper {
    max-width: 100%;
    height: 270px;
    margin: 0.5rem 0;
  }
  .about-main-right-wrapper {
    max-width: 100%;
    height: 270px;
    margin: 0;
  }
  .about-branch-section {
    padding: 1.5rem 0;
  }
  .about-branch-title {
    padding: 1.5rem 0;
  }
  .about-branch-title h3 {
    font-size: 32px;
  }
  .about-branch-line {
    width: 15%;
    margin: auto;
  }
  .about-branch-maps {
    width: 90%;
    padding-bottom: 70%;
  }
  .about-branch-text {
    margin: -2rem auto 1rem auto;
    width: 80%;
  }
  .about-branch-section {
    text-align: center;
  }
  .about-branch-section h6 {
    font-size: 17px;
  }
  .about-branch-section p {
    font-size: 16px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
  .about-hero-section {
    height: 35vh;
  }
  .about-hero-img {
    height: 35vh;
  }
  .about-main-left-wrapper {
    height: 250px;
    margin: 0 0 0 4rem;
  }
  .about-main-right-wrapper {
    height: 250px;
    margin: -2rem 0 0 0;
  }
  .about-branch-maps {
    width: 90%;
  }
  .about-branch-text {
    width: 70%;
  }
}
/* ============= */
/* DOCTOR PAGE */
.doctor-hero-section {
  text-align: center;
  height: 50vh;
  display: flex;
  align-items: center;
  background-color: var(--black);
}
.doctor-hero-img {
  width: 100%;
  z-index: 0;
  height: 50vh;
  position: absolute;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
}
.doctor-hero-section h2 {
  font-size: 30px;
  font-weight: 600;
  color: var(--white);
}
.doctor-title {
  padding: 1.5rem 0;
}
.doctor-title h3 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.doctor-title p {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  padding: 1rem 0;
}
.doctor-main-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.doctor-card {
  margin: 1rem 0;
  padding: 0.4rem;
  background-color: #BFEAFF;
  border-radius: 10px;
  transition: 0.3s ease-in-out;
}
.doctor-card:hover {
  margin: 1rem 0;
  padding: 0.4rem;
  background-color: var(--side-primary);
  color: var(--white) !important;
  border-radius: 10px;
  transition: 0.3s ease-in-out;
}
.doctor-card-img-wrapper {
  max-width: 100%;
  height: 300px;
}
.doctor-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
}
.doctor-card-text {
  padding: 1rem 0.5rem;
}
.doctor-card-text h5 {
  font-size: 20px;
  font-weight: 700;
}
.doctor-card-text p {
  font-size: 16px;
  font-weight: 400;
  color: var(--primary);
}
.doctor-box {
  background-color: #BFEAFF;
  color: var(--black);
  padding: 1rem 2rem 0 2rem;
  border-radius: 10px 10px 80px 10px;
  margin: 2rem auto 5.5rem auto;
  width: 90%;
}
.doctor-box h4 {
  font-size: 30px;
  font-weight: 700;
  padding: 1.5rem 0;
}
.doctor-box p {
  font-size: 16px;
  font-weight: 300;
}
.doctor-box-img {
  width: 60%;
  height: auto;
  position: relative;
  margin: -4rem auto 0 auto;
  display: flex;
}
@media screen and (max-width: 320px) {
  .doctor-hero-section {
    height: 40vh;
  }
  .doctor-hero-img {
    height: 40vh;
  }
  .doctor-hero-section h2 {
    font-size: 25px;
    margin: 3rem 0 0 0;
  }
  .doctor-title {
    padding: 1.5rem 0;
  }
  .doctor-title h3 {
    font-size: 28px;
  }
  .doctor-title p {
    font-size: 17px;
  }
  .doctor-main-line {
    width: 15%;
  }
  .doctor-card-img-wrapper {
    max-width: 100%;
    height: 300px;
  }
  .doctor-card-text h5 {
    font-size: 17px;
  }
  .doctor-card-text p {
    font-size: 14px;
  }
  .reverse-flex {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 321px) and (max-width: 767px) {
  .doctor-hero-section {
    height: 40vh;
  }
  .doctor-hero-img {
    height: 40vh;
  }
  .doctor-hero-section h2 {
    font-size: 27px;
    margin: 3rem 0 0 0;
  }
  .doctor-title {
    padding: 1.5rem 0;
  }
  .doctor-title h3 {
    font-size: 30px;
  }
  .doctor-title p {
    font-size: 18px;
  }
  .doctor-main-line {
    width: 15%;
  }
  .doctor-card-img-wrapper {
    max-width: 100%;
    height: 300px;
  }
  .doctor-card-text h5 {
    font-size: 18px;
  }
  .doctor-card-text p {
    font-size: 15px;
  }
  .doctor-box {
    width: 95%;
  }
  .doctor-box h4 {
    text-align: center;
  }
  .doctor-box p {
    text-align: center;
  }
  .doctor-box-img {
    margin: 0 auto;
  }
  .reverse-flex {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .doctor-hero-section {
    height: 45vh;
  }
  .doctor-hero-img {
    height: 45vh;
  }
  .doctor-hero-section h2 {
    font-size: 28px;
    margin: 3rem 0 0 0;
  }
  .doctor-title {
    padding: 1.5rem 0;
  }
  .doctor-title h3 {
    font-size: 32px;
  }
  .doctor-title p {
    font-size: 18px;
  }
  .doctor-main-line {
    width: 15%;
  }
  .doctor-card-img-wrapper {
    max-width: 100%;
    height: 300px;
  }
  .doctor-card-text h5 {
    font-size: 18px;
  }
  .doctor-card-text p {
    font-size: 16px;
  }
  .doctor-box {
    width: 95%;
  }
  .doctor-box h4 {
    text-align: center;
  }
  .doctor-box p {
    text-align: center;
  }
  .doctor-box-img {
    margin: 0 auto;
  }
  .reverse-flex {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
  
}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
  .doctor-hero-section {
    height: 35vh;
  }
  .doctor-hero-img {
    height: 35vh;
  }
  .doctor-box-img {
    width: 100%;
    margin: 0 auto;
  }
}
/* ============== */
/* ARTICLE MAIN */
.article-main-section {
  margin: 6rem 0 1rem 0;
}
.article-menu {
  margin: 6rem 0 0 0;
}
.article-main-title {
  padding: 1.5rem 0;
}
.article-main-title h2 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.article-main-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.article-card {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 35px 20px 70px 0px;
  border-bottom: 8px solid var(--secondary);
  height: 100%;
  transition: 0.3s ease-in-out;
  width: 90%;
  margin: auto;
}
.article-card:hover {
  color: var(--white);
  background-color: var(--side-primary);
  transition: 0.3s ease-in-out;
  border-bottom: 8px solid var(--side-primary);
  width: 90%;
  margin: auto;
}
.article-card a {
  color: var(--white) !important;
}
.article-card a:hover {
  color: var(--white) !important;
}
.article-img-wrapper {
  max-width: 100%;
  height: 280px;
}
.article-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 30px 15px 15px 15px;
  border-top: 8px solid var(--primary);
}
.article-text {
  padding: 1.5rem;
  border-radius: 0 0 15px 15px;
}
.article-text h3 {
  font-size: 22px;
  font-weight: 600;
}
.article-text p {
  font-size: 15px;
  font-weight: 400;
  padding: 1rem 0;
}
.article-text span {
  font-size: 15px;
  font-weight: 400;
  color: var(--white);
  text-decoration: underline;
  transition: 0.3s ease-in-out;
}
.article-text span:hover {
  font-size: 15px;
  font-weight: 400;
  text-decoration: underline;
  color: var(--secondary);
  transition: 0.3s ease-in-out;
}
/* ARTICLE DETAIL PAGE */
.article-detail-hero-section {
  padding: 8rem 0 1rem 0;
}
.detail-hero-wrapper {
  width: 100%;
  height: 70vh;
  padding: 0 0 1rem 0;
}
.detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px 15px 15px 15px;
}
/* Article Detail Title Section */
.article-detail-wrapper {
  width: 95%;
}
.article-detail-title-section h1 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.5;
}
.tags-title-wrapper {
  padding: 1rem 0;
}
.tags-title-wrapper span {
  color: var(--primary);
  font-size: 16px;
  font-weight: 400;
  border: 1px solid var(--primary);
  border-radius: 10px;
  margin: 0 0.5rem;
  padding: 0.4rem 1rem;
}
/* Article Detail Content Section */
.article-detail-content-section {
  padding: 1rem 0;
}
.article-detail-content-section h2 {
  font-size: 25px;
  font-weight: 600;
  padding: 0.5rem 0;
}
.article-detail-content-section p {
  font-size: 16px;
  font-weight: 400;
}
/* Article Detail Author Section */
.author-section {
  padding: 1rem 0;
}
.author-left-wrapper span {
  font-size: 16px;
  font-weight: 400;
  display: block;
}
.author-img-wrapper {
  width: 100px;
  height: 100px;
}
.author-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0%;
}
.author-right-wrapper span {
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
}
.author-right-wrapper i {
  font-size: 23px;
  margin: auto 1.5rem auto 0;
}
/* Related Article Detail */
.related-article-section {
  padding: 1.5rem 0;
}
.related-article-title {
  padding: 1.5rem 0;
}
.related-article-title h4 {
  font-size: 35px;
  font-weight: 600;
}
.related-article-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
}
.related-article-card {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 35px 20px 70px 0px;
  border-bottom: 8px solid var(--secondary);
  height: 100%;
  transition: 0.3s ease-in-out;
  width: 90%;
}
.related-article-card:hover {
  color: var(--white);
  background-color: var(--side-primary);
  transition: 0.3s ease-in-out;
  border-bottom: 8px solid var(--side-primary);
  width: 90%;
}
.related-article-content a {
  color: var(--white) !important;
}
.related-article-content a:hover {
  color: var(--white) !important;
}
.related-article-img-wrapper {
  max-width: 100%;
  height: 230px;
}
.related-article-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 30px 15px 15px 15px;
  border-top: 8px solid var(--primary);
}
.related-article-text {
  padding: 1.5rem;
  border-radius: 0 0 15px 15px;
}
.related-article-text h3 {
  font-size: 20px;
  font-weight: 600;
}
.related-article-text p {
  font-size: 14px;
  font-weight: 400;
  padding: 1rem 0;
}
.related-article-text span {
  font-size: 13px;
  font-weight: 400;
  color: var(--white);
  text-decoration: underline;
  transition: 0.3s ease-in-out;
}
.related-article-text span:hover {
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
  color: var(--secondary);
  transition: 0.3s ease-in-out;
}
/* Aside Article */
.latest-article-title h5 {
  font-size: 25px;
  font-weight: 700;
  padding: 1rem 0;
}
.aside-article-card {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 10px 10px 45px 0px;
  border-bottom: 6px solid var(--secondary);
  height: 100%;
  transition: 0.3s ease-in-out;
  width: 90%;
  margin: auto;
}
.aside-article-card:hover {
  color: var(--white);
  background-color: var(--side-primary);
  transition: 0.3s ease-in-out;
  border-bottom: 6px solid var(--side-primary);
  width: 90%;
  margin: auto;
}
.aside-article-card a {
  color: var(--white) !important;
}
.aside-article-card a:hover {
  color: var(--white) !important;
}
.aside-article-img-wrapper {
  max-width: 100%;
  height: 150px;
}
.aside-article-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}
.aside-article-text {
  padding: 1.5rem;
  border-radius: 0 0 15px 15px;
}
.aside-article-text h5 {
  font-size: 16px;
  font-weight: 600;
}
.aside-article-text span {
  font-size: 15px;
  font-weight: 400;
  color: var(--white);
  text-decoration: underline;
  transition: 0.3s ease-in-out;
}
.aside-article-text span:hover {
  font-size: 15px;
  font-weight: 400;
  text-decoration: underline;
  color: var(--secondary);
  transition: 0.3s ease-in-out;
}
.article-tags {
  padding: 1rem 0;
}
.article-tags h5 {
  font-size: 22px;
  font-weight: 600;
}
.tags-wrapper {
  padding: 0.5rem 0;
}
.tags-wrapper span {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--primary);
  margin: 0.5rem 0;
  transition: 0.3s ease-in-out;
}
.tags-wrapper span:hover {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--secondary);
  margin: 0.5rem 0;
  transition: 0.3s ease-in-out;
}
@media screen and (max-width: 320px) {
  .article-main-section {
    margin: 6rem 0 1rem 0;
  }
  .article-menu {
    margin: 6rem 0 0 0;
  }
  .article-main-title {
    padding: 1.5rem 0;
  }
  .article-main-title h2 {
    font-size: 28px;
  }
  .article-main-line {
    width: 15%;
  }
  .article-img-wrapper {
    height: 230px;
  }
  .article-text {
    padding: 1.5rem;
    border-radius: 0 0 15px 15px;
  }
  .article-text h3 {
    font-size: 18px;
  }
  .article-text p {
    font-size: 15px;
  }
  .article-text span {
    font-size: 15px;
  }
  .article-text span:hover {
    font-size: 15px;
  }
  .article-detail-hero-section {
    padding: 8rem 0 1rem 0;
  }
  .detail-hero-wrapper {
    height: 40vh;
  }
  /* Article Detail Title Section */
  .article-detail-wrapper {
    width: 100%;
  }
  .article-detail-title-section h1 {
    font-size: 33px;
  }
  .tags-title-wrapper span {
    font-size: 14px;
  }
  /* Article Detail Content Section */
  .article-detail-content-section {
    padding: 1rem 0;
  }
  .article-detail-content-section p {
    font-size: 14px;
    width: 95%;
  }
  /* Article Detail Author Section */
  .author-left-wrapper span {
    font-size: 14px;
  }
  .author-img-wrapper {
    width: 70px;
    height: 70px;
  }
  .author-right-wrapper span {
    font-size: 14px;
  }
  .author-right-wrapper i {
    font-size: 18px;
  }
  /* Related Article Detail */
  .related-article-title h4 {
    font-size: 28px;
  }
  .related-article-line {
    width: 15%;
  }
  .related-article-card {
    margin: 1rem auto;
  }
  .related-article-img-wrapper {
    height: 240px;
  }
  .related-article-text h3 {
    font-size: 17px;
  }
  .related-article-text p {
    font-size: 13px;
  }
  /* Aside Article */
  .latest-article-title h5 {
    font-size: 22px;
  }
  .aside-article-img-wrapper {
    height: 180px;
  }
  .aside-article-text {
    padding: 1.5rem;
    border-radius: 0 0 15px 15px;
  }
  .aside-article-text h5 {
    font-size: 14px;
  }
  .aside-article-text span {
    font-size: 14px;
  }
  .aside-article-text span:hover {
    font-size: 14px;
  }
  .article-tags {
    padding: 1rem 0;
  }
  .article-tags h5 {
    font-size: 24px;
    text-align: center;
  }
  .tags-wrapper span {
    text-align: center;
    font-size: 16px;
  }
  .tags-wrapper span:hover {
    text-align: center;
    font-size: 16px;
  }
}
@media screen and (min-width: 321px) and (max-width: 767px) {
  .article-main-section {
    margin: 6rem 0 1rem 0;
  }
  .article-menu {
    margin: 6rem 0 0 0;
  }
  .article-main-title {
    padding: 1.5rem 0;
  }
  .article-main-title h2 {
    font-size: 30px;
  }
  .article-main-line {
    width: 15%;
  }
  .article-img-wrapper {
    height: 230px;
  }
  .article-text {
    padding: 1.5rem;
    border-radius: 0 0 15px 15px;
  }
  .article-text h3 {
    font-size: 20px;
  }
  .article-text p {
    font-size: 14px;
  }
  .article-text span {
    font-size: 14px;
  }
  .article-text span:hover {
    font-size: 14px;
  }
  .article-detail-hero-section {
    padding: 8rem 0 1rem 0;
  }
  .detail-hero-wrapper {
    height: 40vh;
  }
  /* Article Detail Title Section */
  .article-detail-wrapper {
    width: 100%;
  }
  .article-detail-title-section h1 {
    font-size: 35px;
  }
  .tags-title-wrapper span {
    font-size: 15px;
  }
  /* Article Detail Content Section */
  .article-detail-content-section {
    padding: 1rem 0;
  }
  .article-detail-content-section p {
    font-size: 14px;
    width: 95%;
  }
  /* Article Detail Author Section */
  .author-left-wrapper span {
    font-size: 14px;
  }
  .author-img-wrapper {
    width: 70px;
    height: 70px;
  }
  .author-right-wrapper span {
    font-size: 15px;
  }
  .author-right-wrapper i {
    font-size: 20px;
  }
  /* Related Article Detail */
  .related-article-title h4 {
    font-size: 30px;
  }
  .related-article-line {
    width: 15%;
  }
  .related-article-card {
    margin: 1rem auto;
  }
  .related-article-img-wrapper {
    height: 240px;
  }
  .related-article-text h3 {
    font-size: 18px;
  }
  .related-article-text p {
    font-size: 13px;
  }
  /* Aside Article */
  .latest-article-title h5 {
    font-size: 23px;
  }
  .aside-article-img-wrapper {
    height: 180px;
  }
  .aside-article-text {
    padding: 1.5rem;
    border-radius: 0 0 15px 15px;
  }
  .aside-article-text h5 {
    font-size: 15px;
  }
  .aside-article-text span {
    font-size: 14px;
  }
  .aside-article-text span:hover {
    font-size: 14px;
  }
  .article-tags {
    padding: 1rem 0;
  }
  .article-tags h5 {
    font-size: 25px;
    text-align: center;
  }
  .tags-wrapper span {
    text-align: center;
    font-size: 18px;
  }
  .tags-wrapper span:hover {
    text-align: center;
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .article-main-section {
    margin: 6rem 0 1rem 0;
  }
  .article-menu {
    margin: 6rem 0 0 0;
  }
  .article-main-title {
    padding: 1.5rem 0;
  }
  .article-main-title h2 {
    font-size: 32px;
  }
  .article-main-line {
    width: 15%;
  }
  .article-card {
    width: 100%;
  }
  .article-img-wrapper {
    height: 230px;
  }
  .article-text {
    padding: 1.5rem;
    border-radius: 0 0 15px 15px;
  }
  .article-text h3 {
    font-size: 21px;
  }
  .article-text p {
    font-size: 15px;
  }
  .article-text span {
    font-size: 15px;
  }
  .article-text span:hover {
    font-size: 15px;
  }
  .article-detail-hero-section {
    padding: 8rem 0 1rem 0;
  }
  .detail-hero-wrapper {
    height: 40vh;
  }
  /* Article Detail Title Section */
  .article-detail-wrapper {
    width: 100%;
  }
  .article-detail-title-section h1 {
    font-size: 36px;
  }
  .tags-title-wrapper span {
    font-size: 16px;
  }
  /* Article Detail Content Section */
  .article-detail-content-section {
    padding: 1rem 0;
  }
  .article-detail-content-section p {
    font-size: 15px;
    width: 95%;
  }
  /* Article Detail Author Section */
  .author-left-wrapper span {
    font-size: 15px;
  }
  .author-img-wrapper {
    width: 70px;
    height: 70px;
  }
  .author-right-wrapper span {
    font-size: 16px;
  }
  .author-right-wrapper i {
    font-size: 20px;
  }
  /* Related Article Detail */
  .related-article-title h4 {
    font-size: 32px;
  }
  .related-article-line {
    width: 15%;
  }
  .related-article-card {
    margin: 1rem auto;
  }
  .related-article-img-wrapper {
    height: 240px;
  }
  .related-article-text h3 {
    font-size: 18px;
  }
  .related-article-text p {
    font-size: 14px;
  }
  /* Aside Article */
  .latest-article-title h5 {
    font-size: 24px;
  }
  .aside-article-img-wrapper {
    height: 250px;
  }
  .aside-article-text {
    padding: 1.5rem;
    border-radius: 0 0 15px 15px;
  }
  .aside-article-text h5 {
    font-size: 16px;
  }
  .aside-article-text span {
    font-size: 15px;
  }
  .aside-article-text span:hover {
    font-size: 15px;
  }
  .article-tags {
    padding: 1rem 0;
  }
  .article-tags h5 {
    font-size: 26px;
    text-align: center;
  }
  .tags-wrapper span {
    text-align: center;
    font-size: 18px;
  }
  .tags-wrapper span:hover {
    text-align: center;
    font-size: 18px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
  .article-card {
    width: 100%;
  }
  .detail-hero-wrapper {
    height: 35vh;
  }
}
/* ============== */
/* 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* =========  LANDING PAGE ON CALL DOCTOR ========== */
.lp-oncall-hero-section {
  background-color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 7rem 0 0 0;
}
.lp-oncall-hero-img-wrapper {
  max-width: 500px;
  height: 500px;
  margin: auto;
}
.lp-oncall-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 10px solid var(--primary);
}
.lp-oncall-hero-left {
  width: 85%;
  margin: auto;
}
.lp-oncall-hero-text h1 {
  font-size: 45px;
  font-weight: 700;
}
.custom-font-size {
  font-size: 40px !important;
  padding: 0.5rem 0 !important;
}
.lp-oncall-hero-text h2 {
  font-size: 27px;
  font-weight: 400;
}
.lp-oncall-hero-text p {
  font-size: 17px;
  font-weight: 400;
  padding: 0.7rem 0;
  width: 80%;
}
.hero-button-whatsapp button {
  background-color: var(--primary);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 45%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
}
.hero-button-whatsapp button:hover {
  background-color: var(--white);
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 45%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--primary);
  border-radius: 20px;
  cursor: pointer;
}
.hero-button-call button {
  background-color: var(--secondary);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 45%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--secondary);
  border-radius: 20px;
  margin: 1rem 0;
}
.hero-button-call button:hover {
  background-color: var(--white);
  color: var(--secondary);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 45%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--secondary);
  border-radius: 20px;
  margin: 1rem 0;
  cursor: pointer;
}
.lp-oncall-treat-section {
  padding: 1.5rem 0;
}
.treat-title {
  padding: 1.5rem 0;
}
.treat-title h2 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.treat-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.treat-title p {
  font-size: 19px;
  font-weight: 400;
  text-align: center;
  padding: 0.5rem 0;
}
.treat-content i {
  font-size: 100px;
  color: var(--primary);
  padding: 1rem 0;
  display: flex;
  justify-content: center;
}
.treat-content h5 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  width: 90%;
  padding: 1rem 0;
  margin: auto;
}
.lp-oncall-pricelist-section {
  margin: 2rem 0;
  padding: 1rem 0;
}
.pricelist-box {
  background: linear-gradient(150deg,rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  color: var(--white);
  border-radius: 50px 0 50px 0;
  padding: 3rem;
  width: 80%;
  margin: auto;
}
.vertical-divider {
  color: var(--white);
  border-right: 4px solid var(--white);
}
.pricelist-box h2 {
  font-size: 30px;
  font-weight: 600;
  padding: 0.5rem 0 1rem 0;
}
.pricelist-box p {
  font-size: 16px;
  font-weight: 400;
  margin: 0 !important;
}
.pricelist-box i {
  font-size: 130px;
  padding: 1rem 0;
}
.pricelist-box h5 {
  font-size: 28px;
  font-weight: 700;
  padding: 1.2rem 0;
}
.lp-oncall-strength-section {
  margin: 2rem 0;
  padding: 1.5rem 0;
}
.str-left-wrapper {
  max-width: 450px;
  height: 300px;
  z-index: 3;
}
.str-left-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  border: 5px solid var(--white);
}
.str-right-wrapper {
  max-width: 450px;
  height: 275px;
  margin: -5rem 0 0 14rem;
  position: relative;
  z-index: 4;
}
.str-right-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  border: 5px solid var(--white);
}
.str-title {
  padding: 0 0 1rem 0;
}
.str-title h3 {
  font-size: 25px;
  font-weight: 600;
}
.str-line {
  width: 12%;
  height: 3px;
  border: none;
  background-color: var(--primary);
}
.str-point i {
  font-size: 25px;
  color: var(--primary);
}
.str-point p {
  font-size: 16px;
  font-weight: 400;
}
.lp-oncall-testimonial {
  padding: 3rem 0;
  margin: 1.5rem 0;
}
.testimonial-title {
  padding: 1.5rem 0;
}
.testimonial-title h2 {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.testi-line {
  width: 8%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.testimonial-card {
  background-color: var(--light-grey);
  color: var(--primary);
  padding: 2rem;
  border-radius: 20px;
  width: 70%;
  margin: auto;
  border-left: 10px solid var(--primary);
  border-right: 10px solid var(--primary);
}
.vertical-divider-blue {
  border-right: 4px solid var(--primary);
}
.lp-oncall-testimonial-wrapper {
  width: 200px;
  height: 200px;
  margin: auto;
}
.lp-oncall-testi-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 4px solid var(--primary);
}
.testimonial-card p {
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  padding: 1rem 0;
  text-align: center;
}
.testimonial-card span {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: center;
}
.lp-oncall-cta {
  background: linear-gradient(150deg,rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  color: var(--white);
  padding: 2rem 0;
  text-align: center;
}
.lp-oncall-cta h2 {
  font-size: 27px;
  font-weight: 700;
}
.lp-oncall-cta p {
  font-size: 16px;
  font-weight: 400;
  padding: 1rem 0 0 0;
}
.button-whatsapp button {
  background-color: #25d366;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 25%;
  transition: 0.3s ease-in-out;
  border: 1px solid #25d366;
  border-radius: 20px;
  margin: 0.5rem 0;
}
.button-whatsapp button:hover {
  background-color: var(--white);
  color: #25d366;
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 25%;
  transition: 0.3s ease-in-out;
  border: 1px solid #25d366;
  border-radius: 20px;
  cursor: pointer;
  margin: 0.5rem 0;
}
.button-book button {
  background-color: #BFEAFF;
  color: var(--black);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 25%;
  transition: 0.3s ease-in-out;
  border: 1px solid #BFEAFF;
  border-radius: 20px;
  margin: 0.5rem 0;
}
.button-book button:hover {
  background-color: var(--black);
  color: #BFEAFF;
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 25%;
  transition: 0.3s ease-in-out;
  border: 1px solid #BFEAFF;
  border-radius: 20px;
  cursor: pointer;
  margin: 0.5rem 0;
}
.button-call button {
  background-color: var(--secondary);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 25%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--secondary);
  border-radius: 20px;
  margin: 0.5rem 0;
}
.button-call button:hover {
  background-color: var(--white);
  color: var(--secondary);
  font-size: 18px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 25%;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--secondary);
  border-radius: 20px;
  margin: 0.5rem 0;
  cursor: pointer;
}
.button-home-page button {
  background-color: #BFEAFF;
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 20%;
  transition: 0.3s ease-in-out;
  border: 1px solid #BFEAFF;
  border-radius: 20px;
  margin: 0.5rem 0;
}
.button-home-page button:hover {
  background-color: var(--black);
  color: #BFEAFF;
  font-size: 16px;
  font-weight: 700;
  padding: 0.7rem 0;
  width: 20%;
  transition: 0.3s ease-in-out;
  border: 1px solid #BFEAFF;
  border-radius: 20px;
  margin: 0.5rem 0;
  cursor: pointer;
}
.lp-oncall-faq {
  padding: 2rem 0;
  width: 80%;
  margin: auto;
}
.lp-oncall-faq h2 {
  font-size: 35px;
  font-weight: 700;
  padding: 0.2rem 0;
  width: 75%;
  text-align: center;
  margin: auto;
}
.faq-line {
  width: 15%;
  height: 3px;
  border: none;
  background-color: var(--primary);
  margin: auto;
}
.accordion-wrapper {
  padding: 1rem 0;
}
.accordion-heading {
  margin-bottom: 0;
}
.accordion-button {
  border: 0;
  border-radius: 10px !important;
  box-shadow: none;
  justify-content: normal;
  text-align: left;
  padding: 0;
  color: var(--primary) !important;
  background-color: var(--light-grey);
  background-image: url(https://equalizedigital.com/wp-content/uploads/2024/07/minus.svg), linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1.5rem;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  margin: 0;
  padding: 1rem 3.5rem 0 1.25rem;
  text-decoration: none;
  width: 100%;
  transition: 0.3s ease-in-out;
  font-size: 20px !important;
  margin: 1.2rem 0;
}
.accordion-button::after {
  background-image: none !important;
}
.accordion-button[aria-expanded=false], 
.accordion-button[aria-expanded=false]:hover {
  background-image: url(https://equalizedigital.com/wp-content/uploads/2024/07/plus.svg), linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  font-size: 20px !important;
}
.accordion-button[aria-expanded=false] {
  background-size: 1.5rem;
  transition: 0.3s ease-in-out;
  font-size: 20px !important;
}
.accordion-content {
  background-color: var(--white);
  margin-top: 0;
  overflow: auto;
  padding: 1rem 0 0 1rem;
  font-size: 16px;
  line-height: 1.5;
  border-bottom: 3px solid var(--primary);
}
@media screen and (max-width: 320px) {
  .lp-oncall-hero-section {
    height: 100%;
    padding: 8rem 0 0 0;
  }
  .lp-oncall-hero-img-wrapper {
    max-width: 300px;
    height: 300px;
    margin: 2rem auto 0 auto;
  }
  .lp-oncall-hero-img {
    border: 6px solid var(--primary);
  }
  .lp-oncall-hero-left {
    width: 85%;
    margin: auto;
  }
  .lp-oncall-hero-text h1 {
    font-size: 32px;
    text-align: center;
  }
  .lp-oncall-hero-text p {
    font-size: 14px;
    width: 85%;
    margin: auto;
    text-align: center;
  }
  .hero-button-whatsapp {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0 0;
  }
  .hero-button-whatsapp button {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: auto;
  }
  .hero-button-whatsapp button:hover {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: auto;
  }
  .hero-button-call {
    display: flex;
    justify-content: center;
  }
  .hero-button-call button {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .hero-button-call button:hover {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .lp-oncall-treat-section {
    padding: 1.5rem 0;
  }
  .treat-title {
    padding: 1.5rem 0;
  }
  .treat-title h2 {
    font-size: 25px;
    text-align: center;
  }
  .treat-line {
    width: 15%;
  }
  .treat-content i {
    font-size: 70px;
    padding: 1rem 0;
  }
  .treat-content h5 {
    font-size: 14px;
    width: 90%;
  }
  .lp-oncall-pricelist-section {
    margin: 2rem 0;
    padding: 1rem 0;
  }
  .pricelist-box {
    border-radius: 50px 0 50px 0;
    padding: 3rem;
    width: 90% !important;
  }
  .vertical-divider {
    border: none !important;
  }
  .pricelist-box h2 {
    font-size: 25px;
    text-align: center;
  }
  .pricelist-box p {
    font-size: 14px;
    font-weight: 400;
    margin: 0 !important;
    text-align: center;
  }
  .pricelist-box i {
    font-size: 70px;
    padding: 1rem 0;
  }
  .pricelist-box h5 {
    font-size: 27px;
    font-weight: 700;
    padding: 1.2rem 0;
    text-align: center;
  }
  .lp-oncall-strength-section {
    margin: 2rem 0;
    padding: 1.5rem 0;
  }
  .str-left-wrapper {
    max-width: 100%;
    height: 300px;
  }
  .str-right-wrapper {
    max-width: 100%;
    height: 275px;
    margin: 0 !important;
  }
  .str-title {
    padding: 0 0 1rem 0;
  }
  .str-title h3 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    padding: 1rem 0 0 0;
  }
  .str-line {
    width: 15%;
    height: 3px;
    margin: auto;
  }
  .lp-oncall-testimonial {
    padding: 1rem 0;
    margin: 1.5rem 0;
  }
  .testimonial-title {
    padding: 1.5rem 0;
  }
  .testimonial-title h2 {
    font-size: 25px;
  }
  .testi-line {
    width: 15%;
    height: 3px;
  }
  .testimonial-card {
    padding: 2rem;
    width: 90%;
  }
  .vertical-divider-blue {
    border: none !important;
  }
  .lp-oncall-testimonial-wrapper {
    width: 200px;
    height: 200px;
    margin: auto;
  }
  .testimonial-card p {
    font-size: 14px;
  }
  .testimonial-card span {
    font-size: 13px;
  }
  .lp-oncall-cta h2 {
    font-size: 26px;
  }
  .lp-oncall-cta p {
    font-size: 14px;
  }
  .button-whatsapp button {
    font-size: 15px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-whatsapp button:hover {
    font-size: 15px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-call button {
    font-size: 16px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-call button:hover {
    font-size: 16px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-book button {
    font-size: 15px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-book button:hover {
    font-size: 15px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-home-page button {
    font-size: 14px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-home-page button:hover {
    font-size: 14px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .lp-oncall-faq h2 {
    font-size: 28px;
    width: 100%;
  }
  .faq-line {
    width: 30%;
  }
  .faq-collection {
    width: 100%;
  }
  .lp-oncall-faq p {
    font-size: 14px;
  }
  .lp-oncall-faq .accord-title {
    font-size: 14px;
  }
  .accord-title span {
    font-size: 14px;
  }
  .lp-oncall-faq .accord-content {
    font-size: 14px;
  }
}
@media screen and (min-width: 321px) and (max-width: 767px) {
  .lp-oncall-hero-section {
    height: 100%;
    padding: 8rem 0 0 0;
  }
  .lp-oncall-hero-img-wrapper {
    max-width: 300px;
    height: 300px;
    margin: 2rem auto 0 auto;
  }
  .lp-oncall-hero-img {
    border: 6px solid var(--primary);
  }
  .lp-oncall-hero-left {
    width: 85%;
    margin: auto;
  }
  .lp-oncall-hero-text h1 {
    font-size: 35px;
    text-align: center;
  }
  .lp-oncall-hero-text p {
    font-size: 14px;
    width: 85%;
    margin: auto;
    text-align: center;
  }
  .hero-button-whatsapp {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0 0;
  }
  .hero-button-whatsapp button {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: auto;
  }
  .hero-button-whatsapp button:hover {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: auto;
  }
  .hero-button-call {
    display: flex;
    justify-content: center;
  }
  .hero-button-call button {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .hero-button-call button:hover {
    font-size: 16px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .lp-oncall-treat-section {
    padding: 1.5rem 0;
  }
  .treat-title {
    padding: 1.5rem 0;
  }
  .treat-title h2 {
    font-size: 27px;
    text-align: center;
  }
  .treat-line {
    width: 15%;
  }
  .treat-content i {
    font-size: 70px;
    padding: 1rem 0;
  }
  .treat-content h5 {
    font-size: 15px;
    width: 90%;
  }
  .lp-oncall-pricelist-section {
    margin: 2rem 0;
    padding: 1rem 0;
  }
  .pricelist-box {
    border-radius: 50px 0 50px 0;
    padding: 3rem;
    width: 90% !important;
  }
  .vertical-divider {
    border: none !important;
  }
  .pricelist-box h2 {
    font-size: 27px;
    text-align: center;
  }
  .pricelist-box p {
    font-size: 14px;
    font-weight: 400;
    margin: 0 !important;
    text-align: center;
  }
  .pricelist-box i {
    font-size: 70px;
    padding: 1rem 0;
  }
  .pricelist-box h5 {
    font-size: 28px;
    font-weight: 700;
    padding: 1.2rem 0;
    text-align: center;
  }
  .lp-oncall-strength-section {
    margin: 2rem 0;
    padding: 1.5rem 0;
  }
  .str-left-wrapper {
    max-width: 100%;
    height: 300px;
  }
  .str-right-wrapper {
    max-width: 100%;
    height: 275px;
    margin: 0 !important;
  }
  .str-title {
    padding: 0 0 1rem 0;
  }
  .str-title h3 {
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    padding: 1rem 0 0 0;
  }
  .str-line {
    width: 15%;
    height: 3px;
    margin: auto;
  }
  .lp-oncall-testimonial {
    padding: 1rem 0;
    margin: 1.5rem 0;
  }
  .testimonial-title {
    padding: 1.5rem 0;
  }
  .testimonial-title h2 {
    font-size: 26px;
  }
  .testi-line {
    width: 15%;
    height: 3px;
  }
  .testimonial-card {
    padding: 2rem;
    width: 90%;
  }
  .vertical-divider-blue {
    border: none !important;
  }
  .lp-oncall-testimonial-wrapper {
    width: 200px;
    height: 200px;
    margin: auto;
  }
  .testimonial-card p {
    font-size: 15px;
  }
  .testimonial-card span {
    font-size: 13px;
  }
  .lp-oncall-cta h2 {
    font-size: 27px;
  }
  .lp-oncall-cta p {
    font-size: 14px;
  }
  .button-whatsapp button {
    font-size: 16px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-whatsapp button:hover {
    font-size: 16px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-book button {
    font-size: 16px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-book button:hover {
    font-size: 16px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-home-page button {
    font-size: 14px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-home-page button:hover {
    font-size: 14px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-call button {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-call button:hover {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .lp-oncall-faq h2 {
    font-size: 30px;
    width: 100%;
  }
  .faq-line {
    width: 30%;
  }
  .faq-collection {
    width: 100%;
  }
  .lp-oncall-faq p {
    font-size: 14px;
  }
  .lp-oncall-faq .accord-title {
    font-size: 14px;
  }
  .accord-title span {
    font-size: 14px;
  }
  .lp-oncall-faq .accord-content {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .lp-oncall-hero-section {
    height: 100%;
    padding: 8rem 0 0 0;
  }
  .lp-oncall-hero-img-wrapper {
    max-width: 350px;
    height: 350px;
    margin: 2rem auto 0 auto;
  }
  .lp-oncall-hero-img {
    border: 6px solid var(--primary);
  }
  .lp-oncall-hero-left {
    width: 85%;
    margin: auto;
  }
  .lp-oncall-hero-text h1 {
    font-size: 37px;
    text-align: center;
  }
  .lp-oncall-hero-text p {
    font-size: 15px;
    width: 85%;
    margin: auto;
    text-align: center;
  }
  .hero-button-whatsapp {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0 0;
  }
  .hero-button-whatsapp button {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: auto;
  }
  .hero-button-whatsapp button:hover {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: auto;
  }
  .hero-button-call {
    display: flex;
    justify-content: center;
  }
  .hero-button-call button {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .hero-button-call button:hover {
    font-size: 15px;
    padding: 0.7rem 1rem;
    width: 100%;
    margin: 1rem auto;
  }
  .lp-oncall-treat-section {
    padding: 1.5rem 0;
  }
  .treat-title {
    padding: 1.5rem 0;
  }
  .treat-title h2 {
    font-size: 25px;
    text-align: center;
  }
  .treat-line {
    width: 15%;
  }
  .treat-content i {
    font-size: 70px;
    padding: 1rem 0;
  }
  .treat-content h5 {
    font-size: 15px;
    width: 90%;
  }
  .lp-oncall-pricelist-section {
    margin: 2rem 0;
    padding: 1rem 0;
  }
  .pricelist-box {
    border-radius: 50px 0 50px 0;
    padding: 3rem;
    width: 90% !important;
  }
  .vertical-divider {
    border: none !important;
  }
  .pricelist-box h2 {
    font-size: 28px;
    text-align: center;
  }
  .pricelist-box p {
    font-size: 15px;
    font-weight: 400;
    margin: 0 !important;
    text-align: center;
  }
  .pricelist-box i {
    font-size: 70px;
    padding: 1rem 0;
  }
  .pricelist-box h5 {
    font-size: 27px;
    font-weight: 700;
    padding: 1.2rem 0;
    text-align: center;
  }
  .lp-oncall-strength-section {
    margin: 2rem 0;
    padding: 1.5rem 0;
  }
  .str-left-wrapper {
    max-width: 100%;
    height: 300px;
  }
  .str-right-wrapper {
    max-width: 100%;
    height: 275px;
    margin: 0 !important;
  }
  .str-title {
    padding: 0 0 1rem 0;
  }
  .str-title h3 {
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    padding: 1rem 0 0 0;
  }
  .str-line {
    width: 15%;
    height: 3px;
    margin: auto;
  }
  .lp-oncall-testimonial {
    padding: 1rem 0;
    margin: 1.5rem 0;
  }
  .testimonial-title {
    padding: 1.5rem 0;
  }
  .testimonial-title h2 {
    font-size: 27px;
  }
  .testi-line {
    width: 15%;
    height: 3px;
  }
  .testimonial-card {
    padding: 2rem;
    width: 90%;
  }
  .vertical-divider-blue {
    border: none !important;
  }
  .lp-oncall-testimonial-wrapper {
    width: 200px;
    height: 200px;
    margin: auto;
  }
  .testimonial-card p {
    font-size: 16px;
  }
  .testimonial-card span {
    font-size: 14px;
  }
  .lp-oncall-cta h2 {
    font-size: 28px;
  }
  .lp-oncall-cta p {
    font-size: 15px;
  }
  .button-whatsapp button {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-whatsapp button:hover {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-book button {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-book button:hover {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-home-page button {
    font-size: 16px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-home-page button:hover {
    font-size: 16px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-call button {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .button-call button:hover {
    font-size: 18px;
    padding: 0.7rem 0;
    width: 60%;
    margin: 0.5rem auto;
  }
  .lp-oncall-faq h2 {
    font-size: 30px;
    width: 100%;
  }
  .faq-line {
    width: 30%;
  }
  .faq-collection {
    width: 100%;
  }
  .lp-oncall-faq p {
    font-size: 14px;
  }
  .lp-oncall-faq .accord-title {
    font-size: 14px;
  }
  .accord-title span {
    font-size: 14px;
  }
  .lp-oncall-faq .accord-content {
    font-size: 14px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {

}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
}
/* ================================================= */
/* 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* FOOTER SECTION */
footer {
  background: linear-gradient(150deg,rgba(0, 117, 177, 1) 0%, rgba(1, 65, 97, 1) 100%);
  color: var(--white);
}
.footer-upper {
  color: var(--white);
  padding: 2rem 0;
}
.footer-lower {
  background-color: #014161d9;
  color: var(--white);
}
.upper-footer {
  width: 75%;
  margin: auto;
}
.logo-footer {
  width: 70%;
  height: auto;
}
.left-footer p {
  font-size: 16px;
  font-weight: 400;
  padding: 2rem 0 0 0;
}
.footer-maps {
  position: relative;
  width: 80%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: auto;
}
.footer-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.footer-branch-text {
  padding: 1rem 0 0 0;
}
.footer-branch {
  text-align: center;
}
.footer-branch h6 {
  font-weight: 700;
  font-size: 16px;
}
.footer-branch p {
  font-size: 14px;
  font-weight: 400;
  padding: 1rem 0;
}
.footer-lower span {
  font-weight: 300;
  font-size: 14px;
  margin: auto 2rem;
}
.rounded-socmed {
  background-color: var(--primary-red);
  color: var(--primary-white);
  border-radius: 50%;
  width: 5%;
}
.address-wrapper {
  padding: 1rem 0;
}
.address-wrapper p {
  padding: 0 !important;
}
.social-media-wrapper {
  padding: 0 0 1rem 0;
}
.social-media-wrapper i {
  font-size: 23px;
  margin: auto 1.5rem auto 0;
}
.footer-section a {
  color: var(--primary-white);
  transition: 0.3s ease-in-out;
}
.footer-section a:hover {
  color: var(--primary-red);
  transition: 0.3s ease-in-out;
}
.orientation-text-left {
  text-align: left !important;
}
.orientation-text-right {
  text-align: right !important;
}
@media screen and (max-width: 320px) {
  .upper-footer {
    width: 100%;
    padding: 0 0 1rem 0;
  }
  .orientation-text-left {
    text-align: center !important;
  }
  .orientation-text-right {
    text-align: center !important;
  }
}
@media screen and (min-width: 321px) and (max-width: 767px) {
  .upper-footer {
    width: 100%;
    padding: 0 0 1rem 0;
  }
  .orientation-text-left {
    text-align: center !important;
  }
  .orientation-text-right {
    text-align: center !important;
  }
  .logo-footer {
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: center;
  }
  .left-footer p {
    font-size: 15px;
    padding: 1rem 0 2rem 0;
    text-align: center;
  }
  .footer-maps {
    width: 90%;
  }
  .footer-branch h6 {
    font-size: 15px;
  }
  .footer-branch p {
    font-size: 13px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .logo-footer {
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: center;
  }
  .upper-footer {
    width: 100%;
    padding: 0 0 1rem 0;
  }
  .orientation-text-left {
    text-align: center !important;
  }
  .orientation-text-right {
    text-align: center !important;
  }
  .footer-maps {
    width: 90%;
  }
  .footer-branch h6 {
    font-size: 15px;
  }
  .footer-branch p {
    font-size: 13px;
  }
  .left-footer p {
    font-size: 18px;
    padding: 1rem 0 2rem 0;
    text-align: center;
    width: 90%;
    margin: auto;
  }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
  .footer-upper {
    width: 100%;
    margin: auto;
  }
  .footer-section h4 {
    font-size: 14px;
  }
  .footer-section ul li {
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1399px) {
}
/* Pagination Wrapper */
.custom-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
/* Pagination List */
.pagination-list {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Page Item */
.page-item {
    display: inline-flex;
    color: var(--secondary) !important;
}
/* Page Link */
.page-link {
    border: none;
    background-color: var(--white) !important;
    color: var(--primary) !important;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
}
/* Hover */
.page-link:hover {
    border: none;
    background-color: var(--secondary) !important;
    color: var(--white) !important;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}
/* Active Page */
.page-item.active .page-link {
    background-color: var(--primary) !important;
    color: var(--white) !important;
    cursor: default;
}
/* Disabled */
.page-item.disabled .page-link {
    background: #e0e0e0 !important;
    color: #999 !important;
    cursor: not-allowed;
}
/* Dots */
.page-item.dots .page-link {
    background: transparent;
    cursor: default;
}
/* ============== */