@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Top Bar
	3.2 Header Content
	3.3 Logo
4. Menu
5. Home
6. Boxes
7. About
8. Departments
9. Services
10. CTA
11. Footer



******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 500;
	background: #FFFFFF;
	color: #696969;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 2;
	font-weight: 500;
	color: #696969;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p:last-of-type
{
	margin-bottom: 0;
}
a
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
a:hover
{
	color: #20d34a !important;
}
::selection
{
	color: #20d34a;
}
p::selection
{
	
}
h1{font-size: 48px;}
h2{font-size: 36px;}
h3{font-size: 24px;}
h4{font-size: 18px;}
h5{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.parallax-window
{
    min-height: 400px;
    background: transparent;
}
.nopadding
{
	padding: 0px !important;
}
.button
{
	display: inline-block;
	height: 51px;
	background: #0072bbcc;
}
.button::after
{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #20d34a;
	content: '';
	z-index: 0;
	-webkit-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	-moz-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	-ms-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	-o-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	transition: all 400ms cubic-bezier(.33,.68,.59,.99);
}
.button a
{
	display: block;
	position: relative;
	line-height: 51px;
	font-size: 14px;
	font-weight: 900;
	color: #FFFFFF;
	padding-left: 39px;
	padding-right: 45px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 10;
}
.button:hover::after
{
	height: 100%;
}
.button:hover a
{
	color: #FFFFFF !important;
}
.section_title
{
	padding-top: 17px;
}
.section_title h2
{
	font-size: 30px;
	font-weight: 500;
	color: #0073bbff;
}

.section_title_light h2
{
	color: #FFFFFF;
}

/*********************************
3. Header
*********************************/

.header
{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	z-index: 100;
}
.header.scrolled
{
	top: -48px;
}

/*********************************
3.1 Top Bar
*********************************/

.top_bar
{
	width: 100%;
	background: #0073bbc0;
	padding: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_bar_content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.top_bar_item
{
	margin-left: 33px;
}
.top_bar_item a
{
	font-size: 14px;
	color: #ffffff;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.top_bar_item:first-child
{
	margin-left: 37px;
}
.emergencies
{
	height: 100%;
	
	color: #feffff;
	font-size: 14px;
	font-weight: 700;
	padding-left: 38px;
	padding-right: 38px;
	cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.emergencies:hover
{
	background: #ffffffcc;
	color: #0072bbcc;
	
}

/* Buttons */
.top_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 22px; /* ↓ Reduced button height */
  font-weight: 700;
  color: #1a73e8;
  background: #fff;
  border-radius: 40px;
  text-decoration: none;
  font-size: 15px;
  box-shadow: 2px 3px 6px rgba(0,0,0,0.2),
              0 0 0 2px #fff,
              2px -2px 0 #e60000,
              -2px 2px 0 #1a73e8;
  transition: all 0.3s ease;
}

/* Hover effect */
.top_btn:hover {
  transform: translateY(-2px);
  box-shadow: 2px 5px 10px rgba(0,0,0,0.3),
              0 0 0 2px #fff,
              2px -2px 0 #e60000,
              -2px 2px 0 #1a73e8;
}

/* Icon buttons (like location) */
.icon_btn {
  width: 40px;   /* ↓ Slightly smaller circle */
  height: 40px;  /* ↓ Reduced height */
  padding: 0;
  font-size: 22px;
}

.icon_btn i {
  color: #1a73e8;
}

/********************************
Floating buttons
************************/
.floating-btn {
  position: fixed;
  z-index: 9999;
  background: #0073bb;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 14px 25px;
  border-radius: 50px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;

  /* 👇 hidden by default */
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
}

/* Visible after scroll */
.floating-btn.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Appointment Button */
.appointment-btn {
  bottom: 25px;
  right: 25px;
  border: 2px solid #ffffff;
}

/* Call Button */
.call-btn {
  bottom: 25px;
  left: 25px;
  border: 2px solid #ffffff;
}

/* Hover */
.floating-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 115, 187, 0.4);
}

/* 📌 REVERSE COLORS when footer is visible */
.floating-btn.reverse {
  background: #ffffff;
  color: #0073bb;
  border-color: #0073bb;
}

/*********************************
3.2 Header Content
*********************************/

.header_container
{
	width: 100%;
	background: #0072bbcc;
}
.header_content
{
	width: 100%;
	height: 103px;
}
.header.scrolled .header_content
{
	height: 80px;
}
.main_nav ul li
{
	display: inline-block;
}
.main_nav ul li:not(:first-child)
{
	margin-left: 32px;
}
.main_nav ul li a
{
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}
.hamburger
{
	display: none;
	cursor: pointer;
}
.hamburger i
{
	font-size: 24px;
	color: #272727;
}

/*********************************
3.3 Logo
*********************************/

.logo_container_outer
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.logo_container
{
	position: absolute;
	top: 0;
	left: 15px;
	width: 300px;
	height: 150px;
	background: #FFFFFF;
	box-shadow: 0px 31px 29px rgba(0,0,0,0.09);
	z-index: 10;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.header.scrolled .logo_container
{
	top: 48px;
	height: 79px;
}
.img_head
{
	width: 90%;
}
.header.scrolled .img_head
{
	width: 60%;
}
.img_head_mm
{
	width: 90%;
}
.header.scrolled .img_head_mm
{
	width: 90%;
}
.logo_container a
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.logo_content
{
	width: 100%;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
}
.logo_line
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #20d34a;
}
.logo
{
	margin-top: 10px;
}
.logo span
{
	color: #20d34a;
}
.logo_container a .logo:hover
{
	color: #0072bbcc;
}
.logo_text
{
	font-size: 30px;
	font-weight: 500;
	color: #0072bbcc;
	line-height: 0.75;
}
.logo_box
{
	display: inline-block;
	width: 23px;
	height: 23px;
	background: #20d34a;
	color: #FFFFFF;
	font-size: 24px;
	line-height: 23px;
	text-align: center;
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	-o-transform: translateY(-2px);
	transform: translateY(-2px);
	margin-left: 1px;
}
.logo_sub
{
	font-size: 14px;
	font-weight: 400;
	color: #8f8e8e;
	padding-left: 3px;
	margin-top: 2px;
}

/*********************************
4. Menu
*********************************/

.menu_container
{
	position: fixed;
	top: 0;
	right: -50vw;
	width: 50vw;
	height: 100vh;
	background: #FFFFFF;
	z-index: 101;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	visibility: hidden;
	opacity: 0;
}
.menu_container.active
{
	visibility: visible;
	opacity: 1;
	right: 0;
}
.menu
{
	position: absolute;
	top:150px;
	left: 0;
	padding-left: 15%;
}
.menu_inner
{
	width: 100%;
	height: 100%;
}
.menu_list
{
	-webkit-transform: translateY(1.5rem);
	-moz-transform: translateY(1.5rem);
	-ms-transform: translateY(1.5rem);
	-o-transform: translateY(1.5rem);
	transform: translateY(1.5rem);
	-webkit-transition: all 1000ms 400ms ease;
	-moz-transition: all 1000ms 400ms ease;
	-ms-transition: all 1000ms 400ms ease;
	-o-transition: all 1000ms 400ms ease;
	transition: all 1000ms 400ms ease;
	opacity: 0;
}
.menu_container.active .menu_list
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}
.menu_item
{
	margin-bottom: 5px;
}
.menu_item a
{
	font-family: 'Roboto', sans-serif;
	font-size: 36px;
	font-weight: 700;
	color: #272727;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_item a:hover
{
	color: #ffb606;
}
.menu_close_container
{
	position: absolute;
	top: 86px;
	right: 79px;
	width: 21px;
	height: 21px;
	cursor: pointer;
	z-index: 10;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu_close
{
	top: 9px;
	width: 21px;
	height: 3px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close::after
{
	display: block;
	position: absolute;
	top: -9px;
	left: 9px;
	content: '';
	width: 3px;
	height: 21px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close_container:hover .menu_close,
.menu_close_container:hover .menu_close::after
{
	background: #20d34a;
}
.menu_extra
{
	position: absolute;
	left: 0;
	bottom: 0;
	padding-left: 15%;
	padding-bottom: 25px;
}
.menu_appointment a
{
	font-size: 13px;
	color: #0072bbcc;
}
.menu_emergencies
{
	font-size: 13px;
	color: #272727;
}

/*********************************
5. Home
*********************************/

.home {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.home_slider_container
{
	width: 100%;
	height: 100%;
}
.home_slider_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.home_slider_progress
{
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 0;
	max-width: 100%;
	height: 2px;
	background: #20d34a;
	z-index: 1;
}

/* Text overlay content */
.home_content {
    position: absolute;
    top: 50%;          /* Center vertically */
    left: 50%;         /* Center horizontally */
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: left;
    z-index: 2;        /* Make sure text stays above image */
}

/* Inner container width control */
.home_content_inner {
    max-width: 600px;
    padding: 20px;
}

/* Headline style */
.home_title h1 {
    font-size: 60px;
    font-weight: 600;
    color: #0073bb;
    line-height: 1.1;
    margin-bottom: 15px;
}

/* Subtext style */
.home_text p {
    font-size: 18px;
    font-weight: 400;
    color: #444;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Button */
.home_button a {
    display: inline-block;
    background-color: #0073bb;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.home_button a:hover {
    background-color: #005a94;
}

/* Progress bar */
.home_slider_progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #20d34a;
    z-index: 3;
}

/* Responsive Adjustments */



/*********************************
6. Boxes
*********************************/

.boxes
{
	width: 100%;
	background: transparent;
	z-index: 10;
	padding-bottom: 35px;
}
.box_col
{
	margin-top: -59px;
}
.box
{
	width: 100%;
	height: 287px;
	background: #0072bbcc;
	padding-left: 42px;
	padding-top: 29px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.box::after
{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #20d34a;
	content: '';
}
.box:hover
{
	box-shadow: 0px 15px 49px rgba(0,0,0,0.59);
}
.box_title
{
	font-size: 20px;
	font-weight: 500;
	color: #FFFFFF;
	margin-top: 11px;
}
.working_hours
{
	padding-top: 29px;
	padding-right: 60px;
}
.working_hours_list
{
	margin-top: 40px;
}
.working_hours_list ul li
{
	font-size: 14px;
	font-weight: 400;
	color: #FFFFFF;
}
.working_hours_list ul li:not(:last-child)
{
	margin-bottom: 15px;
}
.box_icon
{
	width: 37px;
	height: 37px;
}
.box_icon img
{
	max-width: 100%;
}
.box_text
{
	font-size: 14px;
	line-height: 2.14;
	color: #FFFFFF;
	font-weight: 400;
	margin-top: 23px;
}
.box_phone
{
	font-size: 30px;
	font-weight: 400;
	color: #20d34a;
	margin-top: 20px;
}
.box_appointments
{
	padding-right: 30px;
}
.box_emergency
{
	padding-right: 30px;
}
.box_emergency_text
{
	font-size: 14px;
	line-height: 2.14;
	color: #FFFFFF;
	font-weight: 400;
	margin-top: 18px;
}

/*********************************
7. About
*********************************/

.about
{
	width: 100%;
	background: #FFFFFF;
	padding-top: 92px;
	padding-bottom: 92px;
}
.about_text
{
	margin-top: 34px;
}
.about_button
{
	margin-top: 45px;
}
.about_image
{
	position: absolute;
	right: 0;
	bottom: 0;
}
.about_image img
{
	max-width: 100%;
}

/*********************************
8. Departments
*********************************/

.departments
{
	width: 100%;
	background: transparent;
	padding-top: 75px;
	padding-bottom: 65px;	
}
.departments_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.departments_row {
  margin-top: 79px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* ✅ Center the entire row */
  align-items: stretch; /* ✅ Keep all cards equal height */
  gap: 25px; /* ✅ Adds even spacing between cards */
}
.dept_col {
  flex: 0 0 22%; /* ✅ 4 cards in one row, evenly spaced */
  display: flex;
  justify-content: center;
}
.dept {
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.dept_content::after {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: #20d34a;
	content: '';
}

.dept_subtitle {
	font-size: 14px;
	font-weight: 400;
	color: #696969;
	margin-top: 5px;
}
.dept_text p
{
	color: #FFFFFF;
	-webkit-transform: translateY(-9px);
	-moz-transform: translateY(-9px);
	-ms-transform: translateY(-9px);
	-o-transform: translateY(-9px);
	transform: translateY(-9px);
}
.dept_button
{
	position: absolute;
	bottom: 0;
	left: 0;
	background: #FFFFFF;
}
.dept_button a
{
	color: #0073bbff;
}

.dept_text {
  padding: 20px;
  color: #fff;
  background: #0073bb;
  border-radius: 10px;
}





.dept_inner {
  position: relative;
  width: 100%;
  height: 430px; /* ✅ Increased height to fit all text and title */
  transition: transform 0.8s;
  transform-style: preserve-3d;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dept:hover .dept_inner {
  transform: rotateY(180deg);
}

.dept_front,
.dept_back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
}

.dept_front {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dept_image {
  width: 100%;
}
.dept_image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px 8px 0 0;
}
.dept_content {
  padding: 15px;
  background: #fff;
  text-align: center;
}
.dept_title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #0073bbff;
  margin-top: 5px;
}
.dept_back {
  background: #0073bbff;
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow-y: auto; /* ✅ Allows scrolling if text exceeds height */
}
.dept_back_content img {
  width: 80%;
  border-radius: 10px;
  margin-bottom: 15px;
}
.dept_back_content p {
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
  text-align: justify;
}



/*********************************
9. Services
*********************************/

.services
{
	width: 100%;
	background: #FFFFFF;
	display: flex;
	
	padding-top: 95px;
	padding-bottom: 65px;
}
.services_row
{
	margin-top: 95px;
}
.service_col
{
	margin-bottom: 30px;
}
.service
{
	width: 100%;
	background: #f5f7fa;
	padding-top: 46px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 57px;
}
.service:hover
{
	background: #0072bbcc;
}
.service::after
{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #20d34a;
	content: '';
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.service:hover::after
{
	visibility: visible;
	opacity: 1;
}
.service_icon
{
	width: 61px;
	height: 61px;
	margin-left: auto;
	margin-right: auto;
}
.service_icon svg
{
	width: 61px;
	height: 61px;
}

.service_icon img
{
	max-width: 100%;
}

.svg path,
.svg rect,
.svg polygon
{
	fill: #20d34a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.service:hover .svg path,
.service:hover .svg rect,
.service:hover .svg polygon
{
	fill: #FFFFFF;
}
.service_text
{
	margin-top: 16px;
}
.service_text p
{
	color: #0073bbff;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.service_title
{
	font-size: 20px;
	font-weight: 700;
	color: #0073bbff;
	padding-top: 41px;
	margin-top: 26px;
}
.service_title::before
{
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 54px;
	height: 3px;
	background: #20d34a;
	content: '';
}
.service:hover .service_title
{
	color: #FFFFFF;
}
.service:hover .service_text p
{
	color: rgba(255,255,255,0.65);
}

/*********************************
10. CTA
*********************************/

.cta
{
	width: 100%;
	padding-top: 131px;
	padding-bottom: 116px;
}
.cta_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.cta_content
{
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
}
.cta_content h2
{
	font-size: 48px;
	font-weight: 700;
	color: #FFFFFF;
}
.cta_content p
{
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	margin-top: -3px;
}
.cta_button
{
	margin-top: 38px;
}

/*********************************
11. Footer
*********************************/

.footer
{
	width: 100%;
}
.footer_container
{
	width: 100%;
	background: #0073bbff;
	padding-bottom: 77px;
}
.footer_logo_container
{
	width: 100%;
	height: 157px;
	background: #0073bbff;
}
.footer_logo_container::after
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: #20d34a;
	content: '';
}
.footer_logo_container a
{
	display: block;
	width: 100%;
	height: 100%;
}
.footer_logo_container .logo_content
{
	display: inline-block;
	padding-left: 0;
	width: auto;
	height: auto;
}
.footer_logo_container .logo
{
	margin-top: 10px;
}
.footer_about_text
{
	margin-top: 36px;
}
.footer_about_text p
{
	color: #b2b2b2;
}
.footer_about_list
{
	margin-top: 32px;
}
.footer_about_list li:not(:last-child)
{
	margin-bottom: 9px;
}
.footer_about_icon
{
	display: inline-block;
	width: 31px;
	height: 31px;
	background: #20d34a;
	text-align: center;
	vertical-align: middle;
}
.footer_about_icon img
{
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.footer_about_list li span
{
	font-size: 14px;
	font-weight: 500;
	color: #b2b2b2;
	padding-left: 10px;
}
.footer_column
{
	padding-top: 138px;
}
.footer_title
{
	font-size: 18px;
	font-weight: 500;
	color: #FFFFFF;
}
.footer_links ul
{
	text-align: center;
	margin-top: 35px;
}
.footer_links ul li:not(:last-child)
{
	margin-bottom: 20px;
}
.footer_links ul li a
{
	font-size: 14px;
	font-weight: 500;
	color: #b2b2b2;
}
.footer_news ul
{
	margin-top: 35px;
}
.footer_news_title a
{
	font-size: 15px;
	font-weight: 500;
	color: #b2b2b2;
}
.footer_news_date
{
	font-size: 14px;
	font-weight: 500;
	color: #20d34a;
	margin-top: 7px;
}
.footer_news ul li:not(:last-child)
{
	margin-bottom: 38px;
}
.copyright
{
	width: 100%;
	background: #020523;
}
.copyright_content
{
	width: 100%;
	height: 62px;
}
.cr
{
	font-size: 14px;
	font-weight: 500;
	color: #97979c;
}
.footer_social ul
{
	margin-right: -5px;
}
.footer_social ul li
{
	display: inline-block;
}
.footer_social ul li:not(:last-child)
{
	margin-right: 19px;
}
.footer_social ul li a i
{
	color: #20d34a;
	padding: 5px;
	font-size: 14px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_social ul li a i:hover
{
	color: #FFFFFF;
}

/*********************************
Blog
*********************************/

.blog-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
  justify-items: center;
}

.blog-card {
  text-decoration: none;
  background: #f8f9fc;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-card:hover {
  background: #0072bbcc;
  transform: translateY(-8px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-content {
  text-align: center;
  padding: 15px;
}

.blog-content h3 {
  font-size: 14px;
  font-weight: 700;
  color: #0072bbcc;
  margin-bottom: 10px;
  text-transform: uppercase;
  line-height: 1.4;
}

.blog-card:hover h3 {
  color: #fff;
}

.blog-icons {
  display: flex;
  justify-content: center;
  gap: 60px;
  font-size: 14px;
}

.blog-icons i {
  margin-right: 6px;
}

.blog-icons span {
  color: #004080;
}

.blog-card:hover .blog-icons span {
  color: #fff;
}

.blog-icons .fa-heart {
  color: red;
}
@media (max-width: 992px) {
  .dept_col {
    flex: 0 0 45%; /* 2 per row on tablets */
  }
}

@media (max-width: 768px) {
  .floating-btn {
    font-size: 14px;
    padding: 5px 7px;
  }
}

@media (max-width: 576px) {
  .dept_col {
    flex: 0 0 90%; /* 1 per row on mobile */
  }
}
/*********************************
RESPONSIVE DESIGN
*********************************/

/* ----------- Large devices (Desktops ≥1200px) ----------- */
@media (min-width: 1200px) {
  .dept_col {
    flex: 0 0 22%; /* 4 cards per row */
  }
}

/* ----------- Medium devices (Tablets ≥768px and <1200px) ----------- */
@media (max-width: 1199px) and (min-width: 768px) {
  .dept_col {
    flex: 0 0 45%; /* 2 cards per row */
  }

  .dept_inner {
    height: 400px; /* Slightly smaller height for tablets */
  }
}

/* ----------- Small devices (Phones <768px) ----------- */
@media (max-width: 767px) {
  .departments {
    padding-top: 50px;
    padding-bottom: 40px;
  }

  .departments_row {
    gap: 20px;
  }

  .dept_col {
    flex: 0 0 100%; /* 1 card per row */
  }

  .dept_inner {
    height: auto; /* Let height adjust naturally */
    min-height: 380px;
  }

  .dept_back {
    padding: 15px;
  }

  .dept_back_content p {
    font-size: 14px;
  }

  /* Floating buttons smaller + spaced */
  .floating-btn {
    padding: 10px 18px;
    font-size: 14px;
  }

  .appointment-btn {
    bottom: 15px;
    right: 15px;
  }

  .call-btn {
    bottom: 70px; /* place slightly above appointment button */
    left: 15px;
  }

  /* Optional: adjust floating buttons to avoid overlapping footer */
  @media (max-height: 600px) {
    .floating-btn {
      padding: 8px 14px;
      font-size: 13px;
    }
  }
}

/* ----------- Extra Small devices (very narrow phones <400px) ----------- */
@media (max-width: 400px) {
  .dept_title {
    font-size: 15px;
  }

  .dept_back_content p {
    font-size: 13px;
  }

  .floating-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}