/*===============================================
Template Name: Mediic - Health Care Doctor HTML5 Template
Author:  https://themeforest.net/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: Mediic
Tags: consulting, finance, corporate, business, consultant, multipurpose, technology, it-solution, software, agency, company, portfolio, bangking, insurance, digital-agency, digital-marketing.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. mediic Nav Menu Area Css
02. mediic Start Hero Section
03. mediic Start Brand Section
04. mediic Start Feature Section
05. mediic Start About Section
06. mediic Start Brnad Section
07. mediic Start  Section
08. mediic Start Appoinment Section
09. mediic Start Team Section
10. mediic Start Why Choose Us Section
11. mediic Start Testimonial Section
12. mediic  Special Skill bar area
13. mediic Start Section Title
14. mediic Start Blog Section
15. mediic Start Subcribe Section
16. mediic Start Footer Section
17. mediic Start Breatcome Secttion
18. mediic Start About Inner Page Secttion
19. mediic Start Mission & Vission Section
20. mediic Start Services Pages Section 
21. mediic Start mediic Section 
22. mediic Start Faq Accordion
23. mediic Start Category box
24. mediic Start Project Section
25. mediic Start Project Details
26. mediic Start Contact Inner Page 
27. mediic  Team details Section 
28. mediic Start nav button
29. mediic Start Search Popup
30. mediic Start Scroll Up Css
31. mediic Start Loader Css
32. mediic Case Study Details Css
33. mediic Search Box Css
34. mediic Loader Css
=======================*/

/*================================
<--  Mediic Nav Menu Area Css -->
==================================*/

.mediic_nav_manu {
  transition: 0.5s;
  z-index: 1;
  position: relative;
  padding: 20px 0px 20px 10px;
  direction: rtl;
}

.sticky {
left: 0;
margin: auto;
position: fixed !important;
top: 0;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.14901960784313725);
background: var(--primary-color) !important;
transition: 0.5s !important;
z-index: 22;
-webkit-animation: 300ms running fadeInDown;
animation: 500ms running fadeInUp;
animation-name: slideInDown;
}

.sticky .mediic_menu > ul > li > a {
color: var(--primary-color);
}

.sticky .mediic-button a {
background: var(--primary-color);
}

.sticky .mediic-button a i {
color: #fff;
}

/* mediic Menu Css*/
nav.mediic_menu {
text-align: center;
position: relative;
z-index: 1;
}

ul.nav_scroll {
padding: 0 24px 0 30px;
background: #d4e5f9;
border-radius: 30px;
}

.mediic_menu ul {
list-style: none;
display: inline-block;
}

.mediic_menu > ul > li {
display: inline-block;
position: relative;
z-index: 1;
}

.mediic_menu > ul > li > a {
font-size: 15px;
text-transform: uppercase;
display: block;
padding: 0px 15px;
margin: 17px 2px;
transition: 0.5s;
color: #002570;
font-weight: 500;
font-family: "Pelak";
}

.mediic_menu > ul > li > a:hover {
color: #007eff;
}

a.mdy-hover {
position: relative;
}

a.mdy-hover:before {
position: absolute;
content: "";
top: 10px;
right: 0px;
width: 6px;
height: 6px;
border-radius: 3px;
background-color: #007eff;
opacity: 0;
transition: 0.5s;
}

a.mdy-hover:hover:before {
opacity: 1;
}

/*mediic Right Side*/

.mediic-right-side {
display: flex;
float: left;
align-items: center;
}

.mediic-button a {
font-size: 15px;
padding: 14px 30px;
font-weight: 500;
color: #fff;
background: #002570;
text-transform: uppercase;
border-radius: 30px;
display: inline-block;
position: relative;
z-index: 1;
transition: 0.5s;
margin: 0 9px 0 14px;
}

.mediic-button a img {
padding-left: 5px;
position: relative;
top: -1px;
}

.mediic-button a:hover i {
color: #fff;
}

.mediic-button a img {
padding-left: 5px;
position: relative;
z-index: 1;
top: -1px;
width: auto;
}

/*** Sub Menu Style 
==========================***/

.mediic_menu ul .sub-menu {
position: absolute;
right: 0;
top: 130%;
width: 217px;
text-align: right;
background: #fff;
margin: 0;
z-index: 1;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
transition: 0.5s;
visibility: hidden;
border-top: 2px solid #007eff;
opacity: 0;
}

.mediic_menu ul li:hover > .sub-menu {
visibility: visible;
top: 100%;
opacity: 1;
}

.mediic_menu ul .sub-menu li {
position: relative;
}

.mediic_menu ul .sub-menu li a {
display: block;
padding: 12px 20px;
margin: 0;
line-height: 1.3;
letter-spacing: normal;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
transition: 0.5s;
visibility: inherit !important;
color: var(--primary-color) !important;
position: relative;
z-index: 1;
}

.mediic_menu ul .sub-menu li a:before {
position: absolute;
content: "";
width: 100%;
height: 0;
left: 0;
bottom: 0;
background: var(--secondary-color);
z-index: -1;
transition: 0.5s;
}

.mediic_menu ul .sub-menu li a:hover:before {
height: 100%;
top: 0;
}

.mediic_menu ul .sub-menu li:hover > a,
.mediic_menu ul .sub-menu .sub-menu li:hover > a,
.mediic_menu ul .sub-menu .sub-menu .sub-menu li:hover > a,
.mediic_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover > a {
background: #007eff;
color: #fff !important;
}

/* sub menu 2 
=================*/

.mediic_menu ul .sub-menu .sub-menu {
left: 100%;
top: 130%;
opacity: 0;
visibility: hidden;
}

.mediic_menu ul .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 0%;
}

/* sub menu 3 
==================*/

.mediic_menu ul .sub-menu .sub-menu li {
position: relative;
}

.mediic_menu ul .sub-menu .sub-menu .sub-menu {
right: 100%;
left: auto;
top: 130%;
opacity: 0;
visibility: hidden;
}

.mediic_menu ul .sub-menu .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 0%;
}

ul.sub-menu li a span {
background: #ffde5d;
padding: 5px 10px;
color: #fff;
opacity: 1;
font-family: "Fira Sans";
border-radius: 2px;
margin-left: 5px;
transition: 0.5s;
}

ul.sub-menu li:hover a span {
background: rgba(255, 255, 255, 0.2);
}

/* sub menu 4 
====================*/

.mediic_menu ul .sub-menu .sub-menu .sub-menu li {
position: relative;
}

.mediic_menu ul .sub-menu .sub-menu .sub-menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
top: 0%;
}

.mediic_nav_manu.sticky .logo_img {
display: none;
}

.main_sticky {
display: none;
}

.mediic_nav_manu.sticky .main_sticky {
display: inherit;
}

.mobile-menu.mean-container {
overflow: hidden;
}

/*
<!-- ============================================================== -->
<!-- Mediic Start Hero Section -->
<!-- ============================================================== -->*/

.hero-section {
background: url(../images/slider/hero-bg3.jpg);
background-repeat: no-repeat;
background-position: 97%;
height: 790px;
background-size: cover;
direction: rtl;
}

.hero-content h5 {
padding: 8px 40px 8px 20px;
font-size: 15px;
color: var(--secondary-color);
font-weight: 600;
border-radius: 18px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
display: inline-block;
height: 37px;
position: relative;
z-index: 1;
}

.hero-content h5:before {
position: absolute;
content: "";
top: 12px;
right: 24px;
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #007eff;
}

.hero-content h1 {
font-size: 65px;
font-weight: 800;
line-height: 81px;
padding: 8px 0 27px;
}

.hero-content h1 span {
color: var(--secondary-color);
}

.hero-thumb {
  position: relative;
  top: 52px;
  left: -175px;
  z-index: 2;
}

/* Mediic___Service */

.hero-mediic-service {
display: flex;
align-items: center;
padding: 40px 0 0;
}

.hero-section .mediic-service-bx {
padding: 16px 30px 6px;
border-radius: 18px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
position: relative;
right: 0;
top: 0;
backdrop-filter: blur(12px);
overflow: hidden;
display: inline-block;
}

.mediic-service-inner-bx {
display: flex;
align-items: center;
}

.mediic-hero-content {
padding: 0 20px 0 0;
}

.hero-section .mediic-hero-content h4 {
color: var(--primary-color);
font-weight: 600;
font-size: 20px;
padding: 0 0 6px;
}

.hero-section .mediic-hero-content p {
width: 100%;
color: #65677a;
font-size: 16px;
font-family: "Pelak";
}

/* Video___ Area */

.video__content {
padding-right: 25px;
}

.play-now {
display: inline-block;
font-weight: 500;
font-size: 16px;
font-family: "Pelak";
color: var(--body-color2);
text-transform: capitalize;
border-radius: 100%;
transition: all 0.3s;
text-align: center;
vertical-align: text-bottom;
position: relative;
z-index: 1;
}

span.play-now:before {
position: absolute;
content: "";
bottom: 2px;
left: 0;
background: #92bdff;
width: 100%;
height: 2px;
}

span.play-now:after {
position: absolute;
content: "";
bottom: 2px;
left: 0;
right: 0;
margin: auto;
background: var(--body-color1);
width: 0%;
height: 2px;
transition: 0.5s;
}

.video__content a:hover span.play-now:after {
width: 100%;
}

.video__content a:hover span.play-now {
color: var(--body-color1);
}

/* Mediic Button */

.mediic-btn a {
padding: 14px 26px;
font-size: 15px;
color: #fff;
display: inline-block;
font-weight: 500;
font-family: "Vazir";
border-radius: 32px;
text-transform: uppercase;
position: relative;
z-index: 1;
transition: 0.5s;
overflow: hidden;
background-color: var(--secondary-color);
}

.mediic-btn a:after {
display: flex;
align-items: flex-end;
justify-content: flex-end;
color: #fff;
position: absolute;
content: attr(data-text);
cursor: pointer;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: var(--secondary-color);
background-image: url(../images/resource/mask-btn.png);
-webkit-mask: url(../images/resource/mask-btn.png);
mask: url(../images/resource/mask-btn.png);
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
animation: mask_animation_mh 0.7s steps(22) forwards;
z-index: -1;
}

.mediic-btn a:hover:after {
animation: mask_animation 0.7s steps(22) forwards;
}

.mediic-btn a img {
padding-right: 5px;
position: relative;
top: -1px;
}

@keyframes mask_animation {
from {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

to {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
}

@keyframes mask_animation_mh {
from {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

to {
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
}
}

/* Madiic___Button  */

.hero-all-shape {
  position: relative;
  z-index: 1;
}

.hero-shape {
position: absolute;
bottom: 46px;
right: 172px;
transform: rotateY(180deg);
}

.hero-shape2 {
position: absolute;
bottom: 312px;
right: 124px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
}

.hero-shape3 {
position: absolute;
left: -71px;
bottom: 335px;
z-index: 22;
}

.hero-shape3 .button span {
font-size: 16px;
padding: 25px 12px;
border-radius: 25px;
background-color: #007eff;
display: inline-block;
color: #fff;
text-transform: uppercase;
font-weight: 600;
writing-mode: vertical-rl;
transform: rotate(180deg);
}

/* Wood Animation */

span.wood-animation img {
animation: wooo 3.5s infinite;
}

@keyframes wooo {
0% {
  transform: rotate3d(0, 0, 0);
}
50% {
  transform: rotate3d(0, 1, 0, 180deg);
}
100% {
  transform: rotate3d(0, 1, 0, 359deg);
}
}

/* Mediic___ Section___ Title */

.mediic-section-title h4 {
font-size: 15px;
padding: 9px 40px 8px 26px;
font-weight: 500;
text-transform: uppercase;
border-radius: 18px;
color: var(--secondary-color);
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 1px solid #ffffff;
position: relative;
z-index: 1;
display: inline-block;
margin-bottom: 12px;
}

.mediic-section-title h4:before {
position: absolute;
content: "";
top: 14px;
right: 24px;
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #007eff;
}

.mediic-section-title h1 {
font-size: 55px;
font-weight: 700;
line-height: 57px;
}

.mediic-desc p {
padding: 21px 0 18px;
color: #65677a;
font-family: "Pelak";
}

.mediic-section-title {
padding-bottom: 50px;
}

.white.mediic-section-title h4 {
color: var(--secondary-color);
background-color: rgba(0, 37, 112, 0.30196078431372547);
border: 1px solid rgba(0, 126, 255, 0.350196078431372547);
}

.white.mediic-section-title h4:before {
background-color: var(--secondary-color);
}

.padding-0.mediic-section-title {
padding-bottom: 0px;
}

/* Style two */

.mediic-section-title2 h4 {
font-size: 16px;
font-weight: 500;
color: var(--secondary-color);
padding: 0 0 9px;
}

.mediic-section-title2 h3 {
font-size: 32px;
font-weight: 700;
}

/*
<!-- ============================================================== -->
<!-- Mediic Start About Section -->
<!-- ============================================================== -->*/

.about-section {
padding: 120px 0 120px;
border-radius: 30px;
background-image: linear-gradient(
  0deg,
  #e5f1ff 0%,
  #e5f1ff 38%,
  #ffffff 64%,
  #ffffff 100%
);
margin: 0px 40px 0 50px;
position: relative;
z-index: 1;
margin-bottom: -120px;
}

.row.about-bg {
border-radius: 30px;
direction: rtl;
text-align: right;
border: 2px solid #ffffff;
margin: 0;
background-image: linear-gradient(
  0deg,
  #e5f1ff 100%,
  #e5f1ff 64%,
  #fff 38%,
  #fff 0%
  
);
}

.about-thumb img {
border-radius: 30px;

}

.about-mediic-service {
display: inline-table;
padding: 0 0 22px;
}

.about-icon {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border-radius: 10px;
background-color: var(--secondary-color);
display: inline-block;
float: right;
margin-left: 20px;
}

.about-icon.upp {
background-color: var(--primary-color);
}

.about-content h3 {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
color: var(--secondary-color);
padding: 0 0 11px;
}

.swiper.about {
height: 250px;
padding: 12px 0 13px;
}

/* Mediic___Button */

.mediic-button a {
font-size: 15px;
padding: 14px 30px;
font-weight: 500;
color: #fff;
background: #002570;
text-transform: uppercase;
border-radius: 30px;
display: inline-block;
position: relative;
z-index: 1;
transition: 0.5s;
margin: 0 9px 0 14px;
}

.mediic-button a img {
padding-left: 5px;
position: relative;
top: -1px;
}

.mediic-button a:hover i {
color: #fff;
}

/* Box-hover */

.mediic-hover-btn {
background-color: #007eff;
height: 100%;
top: 0;
opacity: 0;
position: absolute;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
width: 25%;
z-index: -1;
}

.hover-btn {
left: 0;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
border-radius: 30px 0 0px 30px;
}
.hover-btn2 {
left: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}

.hover-btn3 {
left: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}

.hover-btn4 {
left: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
border-radius: 0 30px 30px 0;
}

.mediic-button a:hover .mediic-hover-btn {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

.mediic-button a img {
padding-right: 5px;
position: relative;
z-index: 1;
top: -1px;
width: auto;
}

/*
<!-- ============================================================== -->
<!-- Mediic Start Service Section -->
<!-- ============================================================== -->*/

.brand-section {
padding: 0 33px 0 50px;
}

.brand-bg {
background: var(--secondary-color);
background-repeat: no-repeat;
background-position: center;
padding: 70px 222px 50px;
margin-top: -2px;
position: relative;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}

.brand-section.newupper {
padding: 0px 0 120px;
}

/*
<!-- ============================================================== -->
<!-- Mediic Start Service Section -->
<!-- ============================================================== -->*/

.services-section {
padding: 230px 0 90px;
background: url(../images/resource/motivation-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.service-single-box {
padding: 50px 35px 55px;
margin-bottom: 30px;
background: var(--secondary-color);
border-radius: 20px;
position: relative;
z-index: 1;
direction: rtl;
text-align: right;
}

.service-single-box:before {
position: absolute;
content: "";
left: -68px;
top: 0;
width: 100%;
height: 100%;
background: url(../images/resource/doctor-set.png);
background-position: center;
background-repeat: no-repeat;
z-index: -1;
transition: 0.5s;
}

.service-single-box:hover:before {
left: -6px;
animation: moveLeftBounce 8s linear infinite;
}

.service-single-box:hover .mediic-button a .mediic-hover-btn {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

/* Service Head */

.service-head {
display: flex;
align-items: center;
justify-content: space-between;
}

.serivce-icon {
align-content: center;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 45px;
background-color: #1c8cff;
border: 1px solid rgba(255, 255, 255, 0.3);
}

.serivce-icon img {
transition: 0.5s;
}

.service-category a {
padding: 3px 22px;
font-size: 15px;
font-weight: 500;
color: #fff;
border-radius: 17px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.35);
display: inline-block;
transition: 0.5s;
}

.service-category a:hover {
border: 1px solid var(--primary-color);
color: #002570;
}

/* Service Content */

.service-content h4 {
font-size: 22px;
padding: 45px 0 18px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
}

.service-content p {
color: #fff;
font-family: "Vazir";
}

/* Service Button */

.service-single-box .mediic-button a {
background-color: #1c8cff;
border: 1px solid rgba(255, 255, 255, 0.3);
margin: 34px 0 0;
padding: 13px 30px;
}

.service-single-box .mediic-hover-btn {
background-color: var(--primary-color);
}

.service-single-box .mediic-button a:hover {
border: 1px solid var(--primary-color);
}

.service-single-box:hover .serivce-icon img {
transform: rotateY(180deg);
}

/* Left Animation */

@keyframes moveLeftBounce {
0% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
50% {
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
}
100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
}

/*
<!-- ============================================================== -->
<!-- Mediic Start portfolio Section -->
<!-- ============================================================== -->*/

.portfolio-section {
  padding: 120px 0 110px;
  background-image: linear-gradient(
  0deg,
  #e5f1ff 0%,
  #e5f1ff 38%,
  #ffffff 64%,
  #ffffff 100%
);
  border-radius: 30px;
  margin: 0 40px 0 35px;
  position: relative;
  z-index: 1;
  background-repeat: no-repeat;
}

.row.portfolio-bg {
padding: 0 40px 0;
}

.portfolio-single-box {
position: relative;
overflow: hidden;
}

.portfolio-thumb img {
width: 100%;
border-radius: 30px;
}

.portfolio-content {
padding: 38px 20px 35px;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 285px;
height: 204px;
background-color: #007eff;
border: 1px solid rgba(255, 255, 255, 0.45);
transition: 0.5s;
transform: translateY(176%) translateX(0%);
border-radius: 15px;
z-index: 12;
cursor: pointer;
transition: 0.5s;
opacity: 0;
}

.port-icon {
font-size: 20px;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
border-radius: 35px;
background-color: #1c8cff;
border: 1px solid rgba(255, 255, 255, 0.3);
display: inline-block;
}

.port-icon a i {
font-size: 22px;
transform: rotate(45deg);
transition: 0.5s;
color: #fff;
}

.port-icon:hover i {
color: var(--primary-color);
transform: rotate(-0deg);
}

h4.port-title a {
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
padding: 25px 0 0;
color: #fff;
display: inline-block;
}

/* Box-hover */

.mediic-hover-box {
background-color: #007eff;
height: 100%;
top: 0;
opacity: 0;
position: absolute;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
width: 25%;
z-index: -1;
}

.hover-bx {
left: 0;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
border-radius: 20px 0 0px 20px;
}
.hover-bx2 {
left: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}

.hover-bx3 {
left: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}

.hover-bx4 {
left: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
border-radius: 0 20px 20px 0;
}

.portfolio-single-box .mediic-hover-box {
background-color: rgba(0, 126, 255, 0.750196078431372547);
}

.portfolio-single-box .mediic-hover-box {
z-index: 1;
}

.portfolio-single-box:hover .mediic-hover-box {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

.portfolio-single-box:hover .portfolio-content {
opacity: 1;
transform: translateY(87%) translateX(0%);
}

.portfolio-single-box .hover-bx {
border-radius: 30px 0 0px 30px;
}

.portfolio-single-box .hover-bx4 {
border-radius: 0 30px 30px 0;
}

.swiper.portfolio .swiper-wrapper {
align-items: baseline;
}

/* Swiper__ Pagination */

.portfolio-section .swiper {
padding-top: 50px;
padding-bottom: 80px;
direction: rtl;
}
.swiper.portfolio .swiper-slide {
background-position: center;
background-size: cover;
}

.swiper.portfolio .swiper-pagination-bullet {
width: 30px !important;
height: 10px !important;
border-radius: 5px !important;
background-color: #007eff !important;
opacity: 1;
}

.swiper.portfolio .swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--primary-color) !important;
}

/* Section --- shape */

.mediic-shape {
position: absolute;
top: -39px;
left: 0;
right: 0;
text-align: center;
}

/*
<!-- ============================================================== -->
<!-- Mediic Start Service Section -->
<!-- ============================================================== -->*/

.service-section {
padding: 120px 0 96px;
margin: 0 40px 0 50px;
background-image: linear-gradient(
  0deg,
  #e5f1ff 0%,
  #e5f1ff 38%,
  #ffffff 64%,
  #ffffff 100%
);
position: relative;
z-index: 1;
margin-bottom: -80px;
border-radius: 30px;
}

.row.service-bg {
padding: 0 250px 0;
border-radius: 30px;
position: relative;
}

.mediic-service-box {
overflow: clip;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-image: var(--bg-color);
}

.category_container {
--gap: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: calc(var(--gap) * 2);
width: 100%;
height: 100%;
direction: rtl;
}
.content {
--active: 0;
padding: 0 35px 27px;
cursor: pointer;
overflow: clip;
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 1.5rem;
width: calc((100% / 5) - var(--gap));
height: 505px;
text-align: center;
transition: width 0.5s ease-in-out;
}

.content:hover {
--active: 1;
width: calc(42% - var(--gap));
text-align: right;
padding: 0 35px 55px;
}

.content img {
position: absolute;
z-index: -20;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
border-radius: 20px;
}

.content .profile_image {
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
}

.content .profile_image {
opacity: calc(1 - var(--active));
transition: opacity 0.5s ease-in-out;
}

.content .professio_image {
opacity: calc(0 - var(--active));
transition: opacity 0.5s ease-in-out;
}

.content:hover .professio_image {
opacity: 1 !important;
}

/* Medical Icon */

.medical-icon {
position: absolute;
top: 50px;
right: 64px;
transition: 0.5s;
}

.content:hover .medical-icon {
left: 35px;
}

.medical-icon img::before {
content: "";
position: absolute;
z-index: 1;
content: "";
width: 90px;
height: 90px;
border-radius: 45px;
background-color: #1c8cff;
border: 1px solid rgba(255, 255, 255, 0.3);
}

.medical-icon img {
width: auto;
position: inherit;
position: relative;
z-index: 1;
}

.profile_detail span {
font-size: 1.5rem;
font-weight: 600;
color: var(--light);
text-wrap: nowrap;
}

h3.service-title {
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
writing-mode: tb;
transform: rotate(180deg);
transition: 0.5s;
margin: 0;
}

.content:hover h3.service-title {
writing-mode: inherit;
transform: rotate(0deg);
color: var(--light);
}

.wrapper {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}

.content:hover .wrapper {
grid-template-rows: 1fr;
}

.profile_quote p {
font-size: 17px;
padding: 0 0 28px;
font-family: "Vazir";
color: var(--light);
transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));
}

.profile_quote {
min-height: 0;
transform: translateY(50%);
opacity: 0;
transition: opacity 0.8s ease-in-out,
  transform 0.8s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}

.profile_quote {
width: auto;
transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));
text-align: right;
}

.content:hover .profile_quote {
transform: none;
opacity: 1;
}

.content .mediic-button a {
font-size: 15px;
padding: 13px 25px;
background-color: #1c8cff;
border: 1px solid rgba(255, 255, 255, 0.3);
margin: 0;
}

/* Service Bottom */

.service-bottom span {
position: relative;
z-index: 1;
display: inline-block;
padding: 55px 0 0;
font-size: 16px;
font-family: "Pelak";
}

.service-bottom span:before {
position: absolute;
content: "";
left: -396px;
bottom: 28px;
width: 378px;
height: 1px;
background-color: #65677a;
opacity: 0.3;
}

.service-bottom span:after {
position: absolute;
content: "";
right: -396px;
bottom: 28px;
width: 378px;
height: 1px;
background-color: #65677a;
opacity: 0.3;
}

.service-bottom span p {
display: inline-block;
}

.service-bottom span a {
display: inline-block;
color: var(--secondary-color);
text-decoration: underline;
}

/*
<!-- ============================================================== -->
<!-- Mediic Start Testimonial Section-->
<!-- ============================================================== -->*/

.testimonial-section {
padding: 190px 0 120px;
background: url(../images/resource/testimonial-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.testimonial-thumb img {
border-radius: 30px;
}

/* Testimonial Slide */

.testimonial-single-slide {
padding: 120px 54px 115px;
border-radius: 30px;
position: relative;
z-index: 1;
background: url(../images/resource/review-bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

.testi-icon img {
width: auto !important;
filter: brightness(0.5) invert(1);
}

.testi-desc p {
font-size: 20px;
padding: 32px 0 30px;
color: var(--light);
font-family: "Pelak";
font-weight: 500;
line-height: 30px;
display: inline-block;
direction: rtl;
text-align: justify;
}

.author-name h4 {
font-size: 22px;
font-weight: 700;
color: #fff;
display: inline-block;

}
span.author-appellation {
font-size: 14px;
font-weight: 400;
font-family: "Vazir";
color: #fff;
text-transform: uppercase;
padding: 0 0 0 40px;
position: relative;
z-index: 1;
}

span.author-appellation:before {
position: absolute;
content: "";

top: 9px;
opacity: 0.502;
width: 20px;
height: 1px;
background-color: #ffffff;
}

/* Owl Nav */
.owl-nav {
position: absolute ;
left: 26px;
top: -157px;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
border: none !important;

}

.owl-prev i,
.owl-next i {
font-size: 20px;
width: 55px;
height: 55px;
line-height: 55px;
text-align: center;
border-radius: 30px;
margin-left: 20px;
color: #fff;
background-color: var(--secondary-color);
border: 1px solid rgba(255, 255, 255, 0.3);
}

.owl-carousel .owl-item img {
width: auto;
float: right;
}

/* Section title */

.top-mediic-section.section-border {
margin: 0 0 60px;
border-bottom: 2px solid rgba(255, 255, 255, 0.20196078431372547);
}

.section-border .mediic-section-title {
padding-bottom: 40px;
}

/* Testimonial Section 2 */

.testimonial-section.style-2 {
background: inherit;
padding: 0px 0 120px;
}

.style-2 .testi-single-box {
padding: 40px 40px 20px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
background-image: inherit;
border-radius: 34px;
}

.people-pic img {
width: auto;
margin-right: 20px;
}

.style-2 .testi-quote2 {
position: absolute;
right: 40px;
}

.style-2 .user-info {
display: flex;
align-items: center;
padding: 0px 0 0;
}

.style-2 .user-name h4 {
font-size: 22px;
font-weight: 700;
color: var(--primary-color);
}

.style-2 .user-name h6 {
font-size: 15px;
color: #65677a;
text-transform: uppercase;
font-weight: 400;
}

.style-2 .testi-desc p {
font-size: 16px;
color: #65677a;
line-height: 24px;
font-family: "DM Sans";
font-style: italic;
padding: 40px 0 0;
}

.testi-thumb img {
border-radius: 30px;
}

/* Owl Dots */

.owl-dots {
text-align: center;
padding: 30px 0 0;
}

.owl-dot {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.30196078431372547) !important;
border: 2px solid #ffffff !important;
display: inline-block;
margin-right: 7px;
}

.owl-dot.active {
position: relative;
z-index: 1;
}

.active.owl-dot:before {
position: absolute;
content: "";
top: 4px;
left: 0;
right: 0;
margin: auto;
width: 8px;
height: 8px;
text-align: center;
background: var(--secondary-color);
border-radius: 10px;
}

/* Style 1 */

.style-1 .testi-single-box {
padding: 60px 45px 60px;
border: 0;
background-color: transparent;
background-image: url(../images/resource/test2.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 34px;
}

ul.testi-rating li {
display: inline-block;
list-style: none;
font-size: 20px;
color: #ffba00;
padding: 36px 0 18px;
}

.style-1 .testi-desc p {
font-size: 19px;
color: #fff;
line-height: 32px;
padding: 0;
font-family: "Albert Sans";
}

.user-info {
display: flex;
align-items: center;
padding: 60px 0 0;
}
.user-name h4 {
font-size: 24px;
font-weight: 600;
color: #fff;
}

.style-1.mediic-appoinment .mediic-shape-2 {
top: -30px;
right: 0;
left: inherit;
}

.appoinment-section.upper {
padding: 100px 0 0;
position: relative;
}

.mediic-shape-cntr {
position: absolute;
top: -260px;
z-index: -1;
}

/* Testo style */

/*Tab Items
=======================*/

/* Tap Style */

.tab {
padding-top: 50px;
position: relative;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}

.tabs {
display: table;
position: relative;
overflow: hidden;
width: 100%;
text-align: center;
}

.tabs li {
line-height: 38px;
margin-bottom: 30px;
position: relative;
display: inline-block;
}

.tabs_item {
display: none;
padding: 30px 0;
}

.tabs_item:first-child {
display: block;
}

/* Box Style */

.upp.style-2 .testi-single-box {
padding: 58px 50px 38px;
}

.upp.style-2 .user-info {
padding: 35px 50px 35px 35px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
background-image: inherit;
margin: 30px 25px 0 0;
border-radius: 15px;
}

.upp.style-2 .user-name h4 {
font-size: 24px;
font-weight: 600;
}

.upp.style-2 .user-name h6 {
text-align: left;
font-size: 17px;
text-transform: capitalize;
}

.upp.style-2 .testi-desc p {
font-size: 20px;
color: #65677a;
line-height: 32px;
font-family: "Albert Sans";
font-style: inherit;
padding: 5px 0 0;
}

.upp.style-2 ul.testi-rating li {
font-size: 19px;
letter-spacing: 5px;
}

/* Upp Style two */

.row.testi-bg {
padding-top: 100px;
}

.upp.style-2 .testi-bg .testi-single-box {
padding: 5px 45px 40px;
}

.upp.style-2 .testi-bg .user-info {
padding: 12px 0 0;
background-color: inherit;
border: 0;
background-image: inherit;
margin: 30px 25px 0 0;
border-radius: 15px;
}

/*
<!-- ============================================================== -->
<!-- Mediic Start Team Section-->
<!-- ============================================================== -->*/

.team-section {
padding: 120px 0 90px;
background: linear-gradient(
  0deg,
  #e5f1ff 0%,
  #e5f1ff 38%,
  #ffffff 64%,
  #ffffff 100%
);
margin: 0 45px 0 45px;
border-radius: 30px;
position: relative;
z-index: 1;
}

.team-single-box {
padding: 40px 0 0px;
border-radius: 20px;
background-color: #e5f1ff;
text-align: center;
margin-bottom: 30px;
position: relative;
z-index: 1;
overflow: hidden;
}

.team-single-box:before {
position: absolute;
content: "";
right: 0;
top: 0;
width: 0;
height: 100%;
background: url(../images/resource/doctor-set.png);
background-repeat: no-repeat;
background-position: right;
animation: moveLeftBounce 8s linear infinite;
transition: 0.5s;
opacity: 0;
}

.team-single-box:hover:before {
right: 20px;
width: 100%;
opacity: 1;
}

.team0-thumb {
padding: 0 0 30px;
}

.team-content {
padding: 0px 0 40px;
border-radius: 20px;
border: 2px solid #ffffff;
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
transition: 0.5s;
}

.team-content h4 {
padding: 30px 0 5px;
font-size: 24px;
font-weight: 700;
transition: 0.5s;
}

.team-content span {
font-family: "Pelak";
text-transform: uppercase;
transition: 0.5s;
}

.team-icon {
transition: 0.5s;
}

.team-icon i {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
transform: rotate(-90deg);
margin-top: 28px;
}

/* team Social icon */

.team-social-icon {
position: absolute;
bottom: -25px;
left: 0;
right: 0;
opacity: 0;
transition: 0.5s;
}

.team-social-icon ul li {
display: inline-block;
list-style: none;
}

.team-social-icon ul li a {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
color: #fff;
background-color: #1c8cff;
border: 1px solid rgba(255, 255, 255, 0.3);
margin-right: 12px;
transition: 0.5s;
}

/* All Hover */

.team-social-icon ul li a:hover {
color: var(--primary-color);
}

.team-single-box:hover .team-content {
border: 1px solid transparent;
border-top: transparent;
}

.team-single-box:hover .team-social-icon {
opacity: 1;
bottom: 42px;
}

.team-single-box:hover .team-icon {
opacity: 0;
}

.team-single-box:hover .mediic-hover-box {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

.team-single-box:hover .team-content h4,
.team-single-box:hover .team-content span {
color: #fff;
}

.style-1.team-section {
background: transparent;
}

/*
<!-- ============================================================== -->
<!-- mediic Start Blog Section-->
<!-- ============================================================== -->*/

.blog-section {
position: relative;
z-index: 1;
padding: 120px 0 120px;
background: linear-gradient(
  0deg,
  #e5f1ff 0%,
  #e5f1ff 38%,
  #ffffff 64%,
  #ffffff 100%
);
margin: 0 45px 0 45px;
}

.blog-section .top-mediic-section.section-border {
border-bottom: 2px solid rgba(0, 37, 112, 0.10196078431372547);
}

.blog-section .mediic-shape {
position: absolute;
top: 0px;
right: -155px;
right: inherit;
text-align: left;
z-index: -1;
}

.blog-single-box {
position: relative;
z-index: 1;
padding: 30px 30px 30px;
display: flex;
align-items: center;
border-radius: 25px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
direction: rtl;
text-align: right;
}

.blog-single-box::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 0;
height: 0;
z-index: -1;
opacity: 0;
border-top: 2px solid var(--secondary-color);
border-left: 2px solid var(--secondary-color);
transition: all linear 0.5s;
}

.blog-single-box::after {
content: "";
position: absolute;
bottom: -1px;
right: -1px;
width: 0;
height: 0;
z-index: -1;
opacity: 0;
border-bottom: 2px solid var(--secondary-color);
border-right: 2px solid var(--secondary-color);
transition: all linear 0.5s;
}

.blog-content {
padding-right: 40px;
}

.blogs-category ul li {
list-style: none;
display: inline-block;
font-size: 15px;
font-family: "Pelak";
padding-left: 23px;
}

li.blg-date i,
li.blg-admin i {
padding: 0 0 0 7px;
color: var(--secondary-color);
direction: ltr;
}

.blog-title h2 a {
font-size: 20px;
font-weight: 700;
line-height: 27px;
text-transform: uppercase;
transition: 0.5s;
padding: 8px 0 0;
display: inline-block;
}

.blog-description p {
padding: 21px 0 0px;
font-family: "Vazir";
}

.blog-icons a {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 1px solid #ffffff;
float: left;
color: var(--secondary-color);
transform: rotate(45deg);
transition: 0.5s;
position: relative;
z-index: 1;
}

.blog-icons a:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 30px;
background: var(--primary-color);
transform: scale(0);
transition: 0.5s;
}

.blog-icons a:hover:before {
transform: scale(1);
}

.blog-icons a:hover {
transform: rotate(0deg);
color: var(--light);
}

.blog-title h2 a:hover {
color: var(--secondary-color);
}

.blog-single-box:hover:before {
width: 100%;
height: 100%;
opacity: 1;
border-radius: 20px;
}

.blog-single-box:hover:after {
width: 100%;
height: 100%;
opacity: 1;
border-radius: 20px;
}

/* Blog Style Two */

.style-2.blog-section {
padding: 0px 0 120px;
background: transparent;
margin: 0;
}

.style-2 .blog-single-box {
padding: 25px 25px 35px;
display: inherit;
margin-bottom: 30px;
}

.style-2 .blog-content {
padding: 23px 42px 0 0;
}

.style-2 .blogs-category ul li {
font-size: 16px;
font-family: "DM Sans";
color: var(--primary-color);
display: inline-block;
margin: 0 0px 0 24px;
position: relative;
z-index: 1;
}

.style-2 .blogs-category ul li:before {
position: absolute;
content: "";
top: 7px;
left: -23px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: rgba(0, 126, 255, 0.2);
}

.style-2 .blog-thumb {
position: relative;
z-index: 1;
}

.style-2 .blog-thumb img {
width: 100%;
border-radius: 16px;
}

.style-2 .mediic-hover-box {
background-color: rgba(0, 17, 112, 0.3);
z-index: 1;
}

.blog-single-box:hover .blog-thumb .mediic-hover-box {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

.top-mediic-section2 {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(28, 32, 73, 0.10196078431372549);
padding: 0 0 28px;
margin-bottom: 60px;
}

/* Upper */

.style-2.upper.up.blog-section {
padding: 100px 0 90px;
}

.style-2.upper .blog-single-box {
padding: 0;
display: inherit;
border: 0;
position: inherit;
margin-bottom: 30px;
background: transparent;
}

.style-2.upper .blog-single-box::before {
position: inherit;
border: 0;
}

.style-2.upper .blog-single-box::after {
position: inherit;
border: 0;
}

.style-2 .blog-single-box .mediic-button a {
padding: 10px 25px;
font-size: 17px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
margin: 30px 0 0;
transition: 0.5s;
}

/* Style */

.style-2.upp.blog-section {
padding: 100px 0 120px;
}

.style-2.upp .blog-title h2 a {
font-size: 23px;
text-transform: capitalize;
}

.style-2.upp .blog-content {
padding: 23px 0px 0 0;
}

/*
<!-- ============================================================== -->
<!-- Mediic Start Subscribe Section-->
<!-- ============================================================== -->*/

.mediic-subscribe {
padding: 40px 0 40px;
background: var(--secondary-color);
margin: 0 45px 0 45px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
z-index: 11;
margin-bottom: -45px;
direction: rtl;
}

.subscribe-content {
display: inline-flex;
align-items: center;
margin-right: 3.5%;
}

.subscribe-title h1 {
font-size: 28px;
font-weight: 700;
padding-right: 38px;
display: inline-block;
color: #fff;
}

.subscribe-right {
display: inline-flex;
float: left;
align-items: center;
}

.subscribe-right .call-icon {
padding-left: 45px;
}

.subscribe-right .mediic-btn a {
border: 1px solid transparent;
font-size: 18px;
transition: 0.5s;
}

.subscribe-right .mediic-btn a:hover {
border: 1px solid #002570;
}

/* Style 2 */

.style-2.mediic-subscribe {
background: url(../images/resource/sbcribe-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 60px 0 60px;
margin: 0;
border-radius: 0;
}

.style-2 .subscribe-content {
display: flex;
align-items: center;
}

.style-2 .subscribe-icon {
font-size: 51px;
width: 120px;
height: 120px;
line-height: 110px;
border-radius: 60px;
text-align: center;
background-color: #ffffff;
display: inline-block;
padding: 0 33px;
}

.style-2 .subscribe-title h1 {
font-size: 32px;
font-weight: 700;
line-height: 38px;
padding-left: 30px;
color: #fff;
margin: 0;
}

/* Mediic Button 2 */

a.mediic-btn {
position: relative;
padding: 17px 42px;
overflow: hidden;
display: inline-block;
background-color: #fff;
color: var(--primary-color);
font-weight: 500;
transition: 500ms;
z-index: 1;
border-radius: 30px;
}

.mediic-btn__hover {
background-color: var(--primary-color);
width: 18.66%;
height: 0;
display: block;
position: absolute;
transition: all 500ms ease;
z-index: -1;
}

.mediic-btn__hover:nth-child(2),
.mediic-btn__hover:nth-child(4),
.mediic-btn__hover:nth-child(6) {
top: 0;
}

.mediic-btn__hover:nth-child(2) {
left: 16.66%;
}

.mediic-btn__hover:nth-child(4) {
left: 49.98%;
}

.mediic-btn__hover:nth-child(6) {
left: 83.3%;
}

.mediic-btn__hover:nth-child(1),
.mediic-btn__hover:nth-child(3),
.mediic-btn__hover:nth-child(5) {
bottom: 0;
}

.mediic-btn__hover:nth-child(1) {
left: 0;
}

.mediic-btn__hover:nth-child(3) {
left: 33.32%;
}

.mediic-btn__hover:nth-child(5) {
left: 66.64%;
}

a.mediic-btn:hover .mediic-btn__hover {
height: 100%;
}

.mediic-btn a i {
padding-left: 7px;
position: relative;
top: 3px;
transform: rotate(-45deg);
display: inline-block;
}

a.mediic-btn i {
padding-left: 7px;
position: relative;
top: 3px;
transform: rotate(-45deg);
display: inline-block;
}

a.mediic-btn:hover {
color: #fff;
}

/*
<!-- ============================================================== -->
<!-- mediic Start Footer Section-->
<!-- ============================================================== -->*/

.footer-section {
direction: rtl;
text-align: right;
padding: 165px 0 0px;
background: url(../images/resource/footer-bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
z-index: 1;
}

.company-info-desc p {
padding: 62px 0 10px;
font-family: "Vazir";
color: #fff;
line-height: 30px;
width: 90%;
}

/* Mediic Service */

ul.mediic-service-times li {
display: block;
list-style: none;
color: #fff;
padding: 10px 0 15px;
margin-bottom: 5px;
}

ul.mediic-service-times li span {
float: right;
}

li.mediic-border {
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* Subscribe */

.subscribe_form {
position: relative;
}

.subscribe_form input {
width: 100%;
height: 60px;
padding: 0 0px;
outline: 0;
display: inline-block;
border-radius: 0;
border: 1px solid rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, 0);
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
font-weight: 500;
font-family: "Pelak";
color: #fff;
transition: 0.5s;
}

.subscribe_form input:hover {
padding: 0 15px 0 15px;
border-radius: 3px;
}
.subscribe_form input::placeholder {
font-size: 18px;
color: #97a9bf;
}

.subscribe_form button {
font-size: 24px;
color: #fff;
text-align: center;
position: absolute;
left: 0;
top: 14px;
display: inline-block;
border: 0;
background: transparent;
transition: 0.5s;
}

.subscribe_form:hover button {
left: 14px;
}

.subscribe_form input:focus,
button:focus {
outline-color: var(--secondary-color);
border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* widget */

h4.widget-title {
font-size: 24px;
color: #fff;
font-weight: 600;
padding: 0 0 22px;
}

/*footer menu*/
.menu-quick-link-content {
padding: 10px 0 0;
}

ul.footer-menu li {
display: block;
list-style: none;
margin-bottom: 15px;
}

ul.footer-menu li i {
font-size: 10px;
display: inline-block;
color: #fff;
opacity: 0.6;
position: relative;
padding-left: 15px;
}

ul.footer-menu li a {
color: #fff;
display: inline-block;
transition: 0.5s;
position: relative;
z-index: 1;
}

ul.footer-menu li a:before {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: 2px;
margin: auto;
width: 0;
height: 1px;
background: var(--secondary-color);
transition: 0.5s;
}

ul.footer-menu li a:hover {
color: var(--secondary-color);
}

ul.footer-menu li a:hover:before {
width: 100%;
}

.mediic-info h3 {
direction: ltr;
font-size: 20px;
font-weight: 700;
color: #fff;
padding: 4px 0 10px;
}

.mediic-info p {
font-size: 16px;
font-family: "Vazir";
color: var(--secondary-color);
}

.mediic-info p span {
color: #fff;
}

/* Style 2 */

.footer-section.style-2 {
padding: 125px 0 0px;
}

.style-2 .place-location p {
font-size: 16px;
font-weight: 500;
padding: 10px 0 0;
color: #97a9bf;
}

.style-2 .mediic-info h5 {
font-size: 20px;
font-weight: 500;
color: #fff;
padding: 11px 0 6px;
}

.style-2 .mediic-info p {
color: #97a9bf;
}

.style-2 .company-info-desc p {
width: 100%;
font-size: 20px;
padding: 52px 0 10px;
}

/* Footer Shape */

.footer-thumb {
position: absolute;
top: 0;
right: -46px;
z-index: -1;
}

.footer-thumb1 {
position: absolute;
bottom: 0px;
left: -36px;
text-align: right;
z-index: -1;
}

/* Footer Bottom */

.row.footer-btm {
border-top: 2px solid rgba(255, 255, 255, 0.14901960784313725);
padding: 25px 0 6px;
margin-top: 92px;
}

/* Social Icon */

.mediic-social-icon a {
color: #fff;
font-size: 18px;
padding-right: 35px;
display: inline-block;
transition: 0.5s;
}

.mediic-company-desc p {
font-size: 14px;
font-family: "Pelak";
color: #97a9bf;
}

.mediic-social-icon a:hover {
color: var(--secondary-color);
}

/* label */

label.widget-check {
font-size: 16px;
color: #97a9bf;
font-family: "Vazir";
padding: 14px 25px 0 0;
display: inline-block;
position: relative;
}

.widget-check input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

.checkmark {
position: absolute;
top: 20px;
right: 0;
height: 16px;
width: 16px;
border-radius: 2px;
border: 1px solid rgba(255, 255, 255, 0.3);
}

.widget-check:hover input ~ .checkmark {
background-color: #ccc;
}

.widget-check input:checked ~ .checkmark {
background-color: var(--secondary-color);
}

.checkmark:after {
content: "";
position: absolute;
display: none;
}

.widget-check input:checked ~ .checkmark:after {
display: block;
}

.widget-check .checkmark:after {
left: 4px;
top: 1px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
}

/*
<!-- ============================================================== -->
<!-- mediic Start Breatcome Secttion -->
<!-- ============================================================== -->*/

.breatcome-section {
background: url(../images/resource/breatcome.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
height: 420px;
}

.breatcome-content h1 {
font-size: 55px;
color: #fff;
text-transform: uppercase;
}

ul.breatcome-item li {
list-style: none;
display: inline-block;
text-transform: uppercase;
color: #fff;
font-family: "DM Sans";
font-size: 16px;
padding: 10px 0 0;
}

ul.breatcome-item li a {
color: #fff;
transition: 0.5s;
padding: 0 26px 0 0;
position: relative;
z-index: 1;
}

ul.breatcome-item li a:before {
position: absolute;
content: "/";
right: 7px;
top: -3px;
}

ul.breatcome-item li a:hover {
color: var(--secondary-color);
}

/*
<!-- ============================================================== -->
<!-- mediic Start About Inner Page Secttion -->
<!-- ============================================================== -->*/

.style-3.about-section {
padding: 120px 0 120px;
position: relative;
z-index: 1;
background: #e6f1ff;
margin: 0;
}

.style-3 .about-thumb img {
border-radius: 30px 30px 0px 0;
}

.style-3 .counter-right-side {
display: flex;
background: var(--secondary-color);
justify-content: center;
width: 549px;
padding: 30px 0 20px;
border-radius: 0 0 30px 30px;
}

.style-3 .odometer-wrapper.counter-box-title {
border-bottom: 0;
padding: 0;
}

.style-3 .odometer-wrapper.counter-box-title h1 {
font-size: 45px;
}

.style-3 .counter-desc p {
font-size: 16px;
text-transform: uppercase;
font-weight: 400;
padding: 0px 0 0;
color: #fff;
font-family: "DM Sans";
}

/* About Services */

ul.about-mediic-services li {
display: block;
list-style: none;
position: relative;
font-family: "DM Sans";
color: var(--primary-color);
padding: 0 0px 20px 25px;
position: relative;
}

ul.about-mediic-services li:before {
position: absolute;
content: "";
left: 0;
top: 8px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: var(--secondary-color);
}

.style-3.about-section .mediic-btn {
padding: 28px 0 0;
}

.style-3.about-section .mediic-shape2 {
position: absolute;
right: 10px;
bottom: 154px;
text-align: right;
z-index: -1;
}

.counter-single-box.bx-1 {
padding-right: 80px;
}

.odometer-wrapper.counter-box-title {
display: flex;
align-items: center;
}

.odometer-wrapper.counter-box-title h1 {
font-weight: 700;
color: #fff;
display: inline-block;
margin: 0;
}

/*********************************
  - mediken  Special Skill bar area -
**********************************/
.skill-serction {
padding: 80px 0 60px;
position: relative;
z-index: 1;
}

.skill-serction .mediken-shape-cntr {
top: 0;
}

.prossess-ber-plugin {
padding: 40px 0 0;
}

.prossess-ber-plugin span {
color: var(--primary-color);
font-weight: 500;
font-size: 18px;
}

.barfiller {
width: 100%;
height: 3px;
background: rgba(0, 37, 112, 0.2);
position: relative;
margin-bottom: 25px;
margin-top: 12px;
border-radius: 5px;
}

span.fill {
background: var(--primary-color) !important;
border-radius: 5px;
}

.barfiller .fill {
display: block;
position: relative;
width: 0px;
height: 100%;
background: #333;
z-index: 1;
}
.barfiller .tipWrap {
display: none;
}

.barfiller .tip {
margin-top: -37px;
font-size: 18px;
color: var(--primary-color);
font-weight: 500;
left: 0px;
border-radius: 2px;
position: absolute;
z-index: 2;
}

.barfiller.tip777:after {
border: solid;
border-color: rgba(255, 183, 77, 0.9) transparent;
border-width: 6px 6px 0 6px;
content: "";
display: block;
position: absolute;
left: 12px;
top: 100%;
z-index: 9;
}
.stat-bar:nth-of-type(1) .stat-bar-rating {
animation-delay: 0.25s;
-webkit-animation-delay:  0.25s;
}

/*
<!-- ============================================================== -->
<!-- Mediken Start Appoinment Section-->
<!-- ============================================================== -->*/

.mediic-appoinment {
background-image: url(../images/resource/appoinment.png);
background-repeat: no-repeat;
background-position: center;
padding: 100px 0 100px;
border-radius: 30px;
background-size: contain;
}

.main-div {
padding: 0 0 120px;
}

.row.appoinment {
position: relative;
z-index: 1;
}

.contact-form-box {
padding: 35px 0 0;
}

.form-box input::placeholder {
font-size: 17px;
color: #002570;
}

.form-box input {
width: 100%;
height: 60px;
margin-bottom: 20px;
padding: 0 20px;
outline: 0;
display: inline-block;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(0, 37, 112, 0.5);
font-weight: 500;
font-family: "DM Sans";
}

.form-box textarea {
width: 100%;
padding: 15px 22px;
outline: 0;
margin-bottom: 25px;
outline: 0;
display: inline-block;
height: 150px;
border-radius: 25px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(0, 37, 112, 0.5);
font-weight: 500;
font-family: "DM Sans";
}

.form-box textarea::placeholder {
color: #002570;
font-size: 17px;
}

.mediken-shape-2 {
position: absolute;
top: 0;
left: 450px;
animation: wooo 3.5s infinite;
}

/* Submit Button */

button.submit-btn {
padding: 16px 40px;
font-size: 18px;
color: #fff;
display: inline-block;
font-weight: 500;
font-family: "Albert Sans";
border-radius: 32px;
position: relative;
z-index: 1;
transition: 0.5s;
overflow: hidden;
border: 1px solid #007eff;
background-color: var(--primary-color);
}

button.submit-btn:after {
display: flex;
align-items: flex-end;
justify-content: flex-end;
color: #fff;
position: absolute;
content: attr(data-text);
cursor: pointer;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #007eff;
background: url(../images/resource/mask-btn2.png);
mask: url(../images/resource/mask-btn2.png);
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
animation: mask_animation_2 0.7s steps(22) forwards;
z-index: -1;
}

button.submit-btn i {
padding-left: 5px;
position: relative;
top: 2px;
transform: rotate(-45deg);
display: inline-block;
}

button.submit-btn:hover:after {
animation: mask_animation 0.7s steps(22) forwards;
}

.button.submit-btn:hover {
color: var(--secondary-color);
}

/* Wood Animation */

.mediic-shape-2 {
position: absolute;
top: 0;
left: 450px;
animation: wooo 3.5s infinite;
}

/*wood animation*/
@keyframes wooo {
0% {
  transform: rotate3d(0, 0, 0);
}
50% {
  transform: rotate3d(0, 1, 0, 180deg);
}
100% {
  transform: rotate3d(0, 1, 0, 359deg);
}
}

/* Style 1 */

.style-1.mediic-appoinment {
background-image: url(../images/resource/appointment2-bg.png);
margin-bottom: 120px;
}

/* Style 2 */

.mediic-appoinment.style-2 {
margin: 120px 0 120px;
}

/*
<!-- ============================================================== -->
<!-- Mediic Start Mission & Vission Section -->
<!-- ============================================================== -->*/

.mission-vission-section {
padding: 0 0 90px;
}

.mission-vission-single-box {
padding: 38px 35px 20px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
margin-bottom: 30px;
position: relative;
z-index: 1;
transition: 0.5s;
}

.m_v-ssion {
align-items: center;
}

.m_v-ssion-icon {
margin-right: 15px;
width: 65px;
height: 65px;
line-height: 60px;
text-align: center;
border-radius: 32px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
transition: 0.5s;
}

.m_v-ssion-title h3 {
font-size: 24px;
color: var(--primary-color);
font-weight: 700;
margin: 0;
transition: 0.5s;
}

.m_v-ssion-desc p {
font-size: 17px;
color: #65677a;
font-family: "DM Sans";
display: inline-block;
padding: 25px 0 0;
transition: 0.5s;
}

.mission-vission-single-box:hover {
border: 2px solid var(--primary-color);
}

.mission-vission-single-box:hover .m_v-ssion-title h3 {
color: var(--secondary-color);
}

.mission-vission-single-box:hover .m_v-ssion-icon {
background: var(--bs-primary-bg-subtle);
}

.mission-vission-single-box:hover .m_v-ssion-desc p {
color: #97a9bf;
}

.mission-vission-single-box .mediic-hover-box {
background-color: var(--primary-color);
}

.mission-vission-single-box .hover-bx {
border-radius: 16px 0 0px 16px;
}

.mission-vission-single-box .hover-bx4 {
border-radius: 0 16px 16px 0;
}

.mission-vission-single-box:hover .mediic-hover-box {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

/*
<!-- ============================================================== -->
<!-- mediic Start Services Pages Section -->
<!-- ============================================================== -->*/

.services-section.style-2 {
background: inherit;
padding: 120px 0 90px;
}

.single-services-box {
padding: 38px 35px 32px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
margin-bottom: 30px;
}

.services-icon {
width: 70px;
height: 70px;
line-height: 57px;
text-align: center;
border-radius: 35px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
margin-right: 15px;
overflow: hidden;
position: relative;
}

.services-icon img {
transition: all 0.5s ease-in-out;
}

.services-icon span img {
position: absolute;
transition: all 0.5s ease-in-out;
opacity: 0;
bottom: -40px;
left: 0;
right: 0;
margin: auto;
}

.services-title h3 {
font-size: 24px;
font-weight: 700;
margin: 0;
transition: 0.5s;
}

.services-desc p {
font-family: "DM Sans";
color: #65677a;
padding: 25px 0 32px;
display: inline-block;
border-bottom: 1px solid #fff;
}

.srvce-btn a {
padding: 0 0 0;
font-size: 15px;
color: #65677a;
font-family: "DM Sans";
position: relative;
z-index: 1;
display: inline-block;
margin: 10px 0 0;
}

.srvce-btn a:before {
position: absolute;
content: "";
left: 0;
bottom: 3px;
width: 0;
height: 1px;
background: var(--secondary-color);
transition: 0.5s;
}

.srvce-btn a i {
position: absolute;
left: 0;
transition: 0.5s;
opacity: 0;
}

.single-services-box:hover .services-icon img {
opacity: 0;
transform: translateY(-200%);
}

.single-services-box:hover .services-icon span img {
position: absolute;
bottom: 0;
transition: all 0.5s ease-in-out;
opacity: 1;
transform: translateY(-13px);
}

.upp.single-services-box:hover .services-icon span img {
transform: translateY(-20px);
}

.single-services-box:hover .srvce-btn a:before {
width: 100%;
}

.single-services-box:hover .srvce-btn a {
color: var(--secondary-color);
}

.single-services-box:hover .srvce-btn a i {
left: 84px;
opacity: 1;
}

.single-services-box:hover .services-title h3 {
color: var(--secondary-color);
}

/*
<!-- ============================================================== -->
<!-- mediic Start mediic Section -->
<!-- ============================================================== -->*/

.mediic-section {
padding: 120px 0 120px;
}

.mediic-thumb img {
border-radius: 32px;
}

.mediic-title h2 {
font-size: 28px;
font-weight: 700;
padding: 25px 0 21px;
}

p.mdy-pd {
padding: 8px 0 30px;
}

/* mediic single box */

.mediic-single-box {
padding: 35px 30px 20px;
background-color: rgba(243, 248, 253, 0.30196078431372547);
border: 2px solid #ffffff;
border-radius: 15px;
margin-bottom: 30px;
}

.mediic-icons {
float: left;
width: 80px;
height: 80px;
line-height: 77px;
text-align: center;
border-radius: 40px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
margin-right: 30px;
}

.mediic-content {
overflow: hidden;
}

.mediic-content h3 {
font-size: 22px;
font-weight: 700;
margin: 0 0 12px;
}

.mediic-content p {
color: #65677a;
}

/* mediic  Blog */
.mediic-blog {
background: var(--secondary-color);
padding: 30px 40px 14px;
border-radius: 15px;
display: flex;
align-items: center;
position: relative;
z-index: 1;
margin-top: 30px;
}

.blog-icon {
border-right: 2px solid rgba(255, 255, 255, 0.2);
padding-right: 30px;
margin-right: 30px;
margin-top: -15px;
}

.blog-desc p {
font-size: 23px;
font-weight: 500;
font-family: "DM Sans";
line-height: 30px;
font-style: italic;
color: #fff;
padding: 0 0 0 24px;
}

.mediic-blog .mediic-hover-box {
background-color: var(--primary-color);
}

.mediic-blog .hover-bx {
border-radius: 15px 0 0px 15px;
}

.mediic-blog .hover-bx4 {
border-radius: 0 15px 15px 0;
}

.mediic-blog:hover .mediic-hover-box {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

/****************************** 
mediken Start Contact Inner Page   
*******************************/

.contact-service-box {
padding: 40px 35px 35px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
margin-bottom: 30px;
}

.contact-head {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ffff;
padding-bottom: 50px;
margin-bottom: 45px;
}

.contact-title h5 {
font-size: 16px;
font-weight: 500;
font-family: "DM Sans";
color: #65677a;
}

.contact-icon {
width: 70px;
height: 70px;
line-height: 63px;
text-align: center;
border-radius: 35px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
}

.contact-address h2 {
font-size: 24px;
font-weight: 700;
}

.contact-address span {
font-size: 15px;
font-family: "DM Sans";
color: #65677a;
padding: 6px 0 0;
display: inline-block;
}

/* Map Section */

.google-map {
padding: 90px 0 120px;
}

/* Error Section */

.error-section {
padding: 90px 170px 90px;
position: relative;
z-index: 1;
}

.error-service-content {
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
height: 780px;
display: flex;
align-items: center;
justify-content: center;
}

.error-content {
text-align: center;
}

.error-content h1 {
font-size: 200px;
color: #002570;
font-weight: 700;
font-family: "DM Sans";
text-align: center;
width: 596px;
height: 280px;
line-height: 280px;
border-radius: 40px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
display: inline-block;
}

.error-content h1 span {
color: var(--secondary-color);
}

.error-content h5 {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
padding: 35px 0 18px;
}

.error-content p {
color: #65677a;
font-family: "DM Sans";
}

.error-content .mediken-button.text-right {
text-align: center !important;
padding: 25px 0 0;
}

.error-content a.mediken-btn {
background-color: var(--secondary-color);
color: #fff;
}

.error-shape {
position: absolute;
bottom: 0;
left: -10px;
z-index: -1;
}

/*****************************
mediic Start Faq Accordion
*******************************/

.style-0.breatcome-section {
margin-top: 0px;
}

.tab_container {
overflow: hidden;
padding: 105px 0 0;
}

.accordion-content h2 {
font-size: 28px;
font-weight: 700;
}

.accordion-content p {
color: #002570;
padding: 20px 0 32px;
}

.accordion li {
list-style: none;
padding: 0px 0px 25px;
}

.accordion li a {
position: relative;
width: 100%;
display: block;
cursor: pointer;
font-weight: 600;
font-size: 20px;
color: var(--primary-color) !important;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
padding: 16px 20px 16px 25px;
border-radius: 15px;
z-index: 1;
}

.accordion li a span {
font-size: 20px;
color: var(--secondary-color);
padding: 0 15px 0 0px;
position: relative;
z-index: 1;
}

.accordion li a span:before {
position: absolute;
content: "";
top: -8px;
right: -765px;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
}

.accordion li p {
display: none;
padding: 24px 15px 10px 25px;
margin: 0;
background: transparent;
overflow: hidden;
font-family: "DM Sans";
}

.accordion a:before {
width: 3px;
height: 15px;
background: var(--secondary-color);
position: absolute;
right: 41px;
content: " ";
top: 22px;
transform: rotate(0deg);
transition: all 0.5s ease-in-out;
}

.accordion a:after {
width: 15px;
height: 3px;
background: var(--secondary-color);
position: absolute;
right: 35px;
content: " ";
top: 28px;
transition: all 0.5s ease-in-out;
z-index: 1;
}

/* Active */

.accordion a.active:after {
transform: rotate(0deg);
-webkit-transition: all 0.5s ease-in-out;
background: #fff;
}

.accordion a.active:before {
display: none;
}

.accordion a.active {
background: var(--primary-color);
color: #fff !important;
border: 2px solid var(--primary-color);
}

.accordion li a.active span {
color: #fff;
}

.accordion li a.active span:before {
background-color: var(--secondary-color);
border: 2px solid var(--secondary-color);
}

/* STyle 2 */

.faq-section .tab_container {
padding: 120px 0 120px;
}

.style-2.accordion li p {
display: none;
padding: 24px 15px 30px 25px;
margin: 0;
background: #eef5ff;
overflow: hidden;
font-size: 16px;
font-family: "DM Sans";
border-top: 0;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
}

.style-2.accordion li a span {
padding: 0 0px 0 0px;
}

.style-2.accordion li a span:before {
right: -584px;
}

.style-2.accordion li a.active span:before {
background: var(--primary-color);
border: 2px solid var(--primary-color);
}

/* Active */

.style-2.accordion a.active {
background: #eef5ff;
color: var(--primary-color) !important;
border: 2px solid #fff;
border-radius: 15px 15px 0 0;
border-bottom: 2px solid #fff;
padding: 18px 20px 22px 25px;
}

/* Accordion Style 2 */

.accordion2 li {
list-style: none;
padding: 0px 0px 25px;
}

.accordion2 li a {
position: relative;
width: 100%;
display: block;
cursor: pointer;
font-weight: 600;
font-size: 20px;
color: var(--primary-color) !important;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
padding: 16px 20px 16px 25px;
border-radius: 15px;
z-index: 1;
}

.accordion2 li a span {
font-size: 20px;
color: var(--secondary-color);
padding: 0 15px 0 0px;
position: relative;
z-index: 1;
}

.accordion2 li a span:before {
position: absolute;
content: "";
top: -8px;
right: -584px;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
}

.style-2.accordion2 li a span {
padding: 0 0px 0 0px;
}

.accordion2 li p {
display: none;
padding: 24px 15px 30px 25px;
margin: 0;
background: #eef5ff;
overflow: hidden;
font-size: 16px;
font-family: "DM Sans";
border-top: 0;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
}

.accordion2 a:before {
width: 3px;
height: 15px;
background: var(--secondary-color);
position: absolute;
right: 41px;
content: " ";
top: 22px;
transform: rotate(0deg);
transition: all 0.5s ease-in-out;
}

.accordion2 a:after {
width: 15px;
height: 3px;
background: var(--secondary-color);
position: absolute;
right: 35px;
content: " ";
top: 28px;
transition: all 0.5s ease-in-out;
z-index: 1;
}

/* Active */

.accordion2 a.active:after {
transform: rotate(0deg);
-webkit-transition: all 0.5s ease-in-out;
background: #fff;
}

.accordion2 a.active:before {
display: none;
}

.accordion2 a.active {
background: #eef5ff;
color: var(--primary-color) !important;
border: 2px solid #fff;
border-radius: 15px 15px 0 0;
border-bottom: 2px solid #fff;
padding: 18px 20px 22px 25px;
}

.accordion2 li a.active span:before {
background-color: var(--secondary-color);
border: 2px solid var(--secondary-color);
}

/* Style upp */

.upp.faq-section .tab_container {
padding: 0px 0 120px;
}

.upp.style-2.accordion li a {
font-size: 18px;
}

.upp.style-2.accordion li a span:before {
right: -1245px;
}

/* ======================
mediic Start Category box
========================= */

.mediic-category-items {
margin-bottom: 40px;
}

h3.category-title {
font-size: 28px;
font-weight: 700;
padding: 0px 0 14px;
margin-bottom: 30px;
position: relative;
z-index: 1;
display: inline-block;
}

h3.category-title:before {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 30px;
height: 2px;
background: #0c5adb;
transition: 0.5s;
}

h3.category-title:hover:before {
width: 100%;
}

/* Content */

.category-content {
padding-left: 20px;
}

.category-content h4 {
margin: 0;
}

.category-content h4 a {
font-size: 18px;
font-weight: 600;
line-height: 24px;
display: inline-block;
transition: 0.5s;
}

.category-content h6 {
font-size: 15px;
font-weight: 400;
font-family: "DM Sans";
margin: 9px 0 0;
}

.category-content h4 a:hover {
color: var(--secondary-color);
}

/* box */

.mediic-category-box {
padding: 20px 35px 24px;
border-radius: 20px;
background-color: rgba(243, 248, 253, 0.30196078431372547);
border: 2px solid #ffffff;
margin-bottom: 30px;
}

ul.mediic-service li {
padding: 13px 24px 13px;
height: 56px;
display: block;
list-style: none;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
margin: 0 0 15px;
position: relative;
z-index: 1;
transition: 0.5s;
}

ul.mediic-service li:before {
position: absolute;
content: "";
z-index: -1;
right: 0;
top: 0;
width: 0%;
height: 100%;
background: var(--primary-color);
transition: 0.5s;
border-radius: 5px;
}

ul.mediic-service li a {
font-size: 15px;
font-family: "DM Sans";
color: #65677a;
transition: 0.5s;
}

ul.mediic-service li a i {
padding: 0 12px 0 0;
font-size: 17px;
display: inline-block;
color: var(--secondary-color);
transition: 0.5s;
}

ul.mediic-service li:hover:before {
width: 100%;
left: 0;
}

ul.mediic-service li:hover a {
color: #fff;
}

ul.mediic-service li:hover a i {
color: #fff;
}

/* Blog Details */

.search-bx {
position: relative;
z-index: 1;
padding: 0 0 10px;
}

.search-bx input {
padding: 10px 30px;
width: 100%;
height: 60px;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
}

.search-bx button.subscribe-btn {
height: 50px;
width: 50px;
border: 0;
border-radius: 50%;
background: var(--secondary-color);
color: #fff;
position: absolute;
right: 8px;
top: 5px;
}

/* Download Button */

.download-btn a {
font-size: 15px;
font-family: "DM Sans";
text-transform: uppercase;
display: inline-block;
background: var(--primary-color);
width: 100%;
color: #fff;
padding: 15px 23px;
border-radius: 5px;
margin-bottom: 18px;
position: relative;
z-index: 1;
overflow: hidden;
}

.download-btn a i {
font-size: 22px;
position: relative;
top: 2px;
padding-right: 7px;
}

.download-btn a span i {
float: right;
display: inline-block;
font-size: 17px;
padding: 0;
transition: 0.5s;
}

a.active-btn {
background: var(--secondary-color);
}

span.dwnlod-hvr i {
position: absolute;
right: 22px;
bottom: 0;
opacity: 0;
transition: 0.5s;
transform: translateY(50px);
}

.download-btn a:hover span i {
opacity: 0;
transform: translateY(-200%);
}

.download-btn a:hover span.dwnlod-hvr i {
opacity: 1;
transform: translateY(15px);
}

/* Compani contact */

.mediic-company-contact {
background: url(../images/resource/company-bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 55px 40px 50px;
border-radius: 20px;
}

.call-icon {
position: relative;
z-index: 1;
display: inline-block;
}

.call-icon:before {
position: absolute;
content: "";
top: 35px;
left: 80px;
/* right: 35px; */
margin: auto;
width: 105px;
height: 105px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0);
border: 3px solid #007eff;
animation: zoomBig2 2.25s linear infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
padding-right: 45px;
}

.mediic-category-content h6 {
font-size: 18px;
font-weight: 500;
font-family: "DM Sans";
padding: 28px 0 0;
color: #fff;
}
.mediic-category-content h4 {
font-size: 24px;
font-weight: 400;
font-family: "DM Sans";
padding: 4px 0 20px;
color: #fff;
}

.mediic-category-content p {
font-size: 16px;
color: #fff;
font-family: "DM Sans";
}

.mediic-category-content p i {
color: var(--secondary-color);
padding: 0 8px 0 0;
display: inline-block;
}

@keyframes zoomBig2 {
0% {
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 1;
  border-width: 7px;
}
40% {
  opacity: 0.5;
  border-width: 5px;
}
65% {
  border-width: 4px;
}
100% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  border-width: 2px;
}
}

/* Contact Button */

.mediic-contact-btn a {
padding: 15px 30px;
font-family: "DM Sans";
background: var(--secondary-color);
color: #fff;
display: block;
text-align: center;
border-radius: 5px;
position: relative;
z-index: 1;
margin-top: 52px;
}

.mediic-contact-btn a i {
padding-left: 5px;
font-size: 18px;
position: relative;
top: 3px;
}

.mediic-contact-btn a .mediic-hover-btn {
background-color: var(--primary-color);
}

.mediic-contact-btn a .hover-btn {
border-radius: 5px 0 0px 5px;
}

.mediic-contact-btn a .hover-btn4 {
border-radius: 0 5px 5px 0;
}

.mediic-contact-btn a:hover .mediic-hover-btn {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

/* Custom Scroll  */

.custom-scroll {
width: auto;
width: 100%;
height: 1240px;
padding: 0 20px 0 0;
text-align: left;
background: transparent;
overflow-y: auto;
overflow-x: hidden;
display: inline-block;
}

.custom-scroll .accordion li a span:before {
right: -728px;
}

.custom-scroll .mediic-content p {
font-size: 16px;
}

.mediic-section.blg-list .custom-scroll {
height: 1665px;
}

/* Blog Post Comment */

.blog-post-comment {
padding: 90px 0 0;
}

.post-comment {
display: flex;
padding: 30px 0 0;
}

.post-content {
margin: 0px 0 0px 30px;
padding-bottom: 20px;
border-bottom: 2px solid #fff;
}

h4.post-title {
font-size: 20px;
font-weight: 600;
}

.post-content h6 {
font-size: 14px;
font-weight: 400;
font-family: "DM Sans";
margin: 6px 0 14px;
}

p.posts-reply {
font-size: 16px;
font-family: "DM Sans";
color: #65677a;
}

.post-comment2 {
display: flex;
padding: 40px 0 0;
margin-left: 80px;
}

/*
<!-- ============================================================== -->
<!-- mediic Start Project Section-->
<!-- ============================================================== -->*/

.project-section {
padding: 120px 0 0px;
}

.project-thumb {
position: relative;
z-index: 1;
}

.project-thumb img {
width: 100%;
border-radius: 18px;
}

.project-content {
padding: 25px 30px 10px;
position: relative;
border-radius: 20px;
background-image: linear-gradient(
  180deg,
  #007dff 0%,
  #e5f1ff 74%,
  #e5f1ff 100%
);
border: 2px solid #ffffff;
bottom: 92px;
width: 84%;
left: 0;
right: 0;
margin: auto;
transition: 0.5s;
}

.project-content h5 {
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
}

.project-content h2 {
font-size: 22px;
padding: 0px 0 12px;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
}

.project-content p {
font-size: 16px;
color: #65677a;
font-family: "DM Sans";
}

.project-icon a {
font-size: 18px;
width: 40px;
height: 40px;
line-height: 37px;
text-align: center;
border-radius: 20px;
background-color: #002570;
border: 2px solid #ffffff;
color: #fff;
position: absolute;
top: 43px;
right: 79px;
opacity: 0;
transition: 0.5s;
}

.single-project-box:hover .project-icon a {
right: 20px;
opacity: 1;
}

.single-project-box:hover .project-content {
bottom: 130px;
}

/* Owl Nav */
.project-list .owl-nav {
position: absolute;
left: -140px;
top: 200px;
right: inherit;
}

.project-list .owl-prev {
position: relative;
z-index: 1;
margin-bottom: 10px;
display: block;
}

.project-list .owl-prev:before {
position: absolute;
content: "";
left: 50px;
top: -200px;
width: 2px;
height: 180px;
background-image: linear-gradient(
  0deg,
  rgba(0, 125, 255, 0.9999999999999999) 0%,
  rgba(0, 125, 255, 0.9999999999999999) 10%,
  rgba(0, 125, 255, 0) 80%,
  rgba(0, 125, 255, 0) 100%
);
}

.project-list .owl-prev i,
.project-list .owl-next i {
color: var(--primary-color);
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
}

.project-section .project-list .owl-dots {
text-align: center;
padding: 0px 0 40px;
position: relative;
top: -91px;
}

/* Owl Active */

.active.center .single-project-box .project-icon a {
right: 20px;
opacity: 1;
}

.active.center .single-project-box .project-content {
bottom: 130px;
}

/* *********************
mediic Start Project Details
********************** */

.doctors-service {
padding: 22px 25px 20px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
display: flex;
margin-bottom: 25px;
}

.doctor-content {
padding: 0 0 0 12px;
}

.doctor-content h5 {
font-size: 15px;
font-weight: 500;
font-family: "DM Sans";
margin: 0;
}
.doctor-content h3 {
font-size: 18px;
margin-top: 8px;
}

.doctor-content h3 a {
font-weight: 700;
transition: 0.5s;
}

.doctor-content h3 a:hover {
color: var(--secondary-color);
}

/****************************** 
mediic Start Contact Inner Page   
*******************************/

.contact-service-box {
padding: 40px 35px 35px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
margin-bottom: 30px;
}

.contact-head {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ffff;
padding-bottom: 50px;
margin-bottom: 45px;
}

.contact-title h5 {
font-size: 16px;
font-weight: 500;
font-family: "DM Sans";
color: #65677a;
}

.contact-icon {
width: 70px;
height: 70px;
line-height: 63px;
text-align: center;
border-radius: 35px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
}

.contact-address h2 {
font-size: 24px;
font-weight: 700;
}

.contact-address span {
font-size: 15px;
font-family: "DM Sans";
color: #65677a;
padding: 6px 0 0;
display: inline-block;
}

/* Map Section */

.google-map {
padding: 90px 0 120px;
}

/* Error Section */

.error-section {
padding: 90px 170px 90px;
position: relative;
z-index: 1;
}

.error-service-content {
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
height: 780px;
display: flex;
align-items: center;
justify-content: center;
}

.error-content {
text-align: center;
}

.error-content h1 {
font-size: 200px;
color: #002570;
font-weight: 700;
font-family: "DM Sans";
text-align: center;
width: 596px;
height: 280px;
line-height: 280px;
border-radius: 40px;
background-color: rgba(255, 255, 255, 0.30196078431372547);
border: 2px solid #ffffff;
display: inline-block;
}

.error-content h1 span {
color: var(--secondary-color);
}

.error-content h5 {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
padding: 35px 0 18px;
}

.error-content p {
color: #65677a;
font-family: "DM Sans";
}

.error-content .mediic-button.text-right {
text-align: center !important;
padding: 25px 0 0;
}

.error-content a.mediic-btn {
background-color: var(--secondary-color);
color: #fff;
}

.error-shape {
position: absolute;
bottom: 0;
left: -10px;
z-index: -1;
}

/*mediic  Team details Section 
==============================*/

.team-details-area {
padding: 100px 0 100px;
}

.team-details {
box-shadow: 6px 5px 30px rgba(0, 0, 0, 0.12);
padding: 50px;
margin-bottom: 50px;
border-radius: 20px;
}

.team-details-thumb img {
width: 100%;
margin-bottom: 30px;
border-radius: 30px;
}

/* Team details content */

.team-details-content {
padding: 0 0 0 35px;
}

.team-details-title h2 {
color: #0e0e0e;
font-size: 30px;
font-weight: 700;
}

.team-details-title p {
font-size: 16px;
margin: 10px 0 0;
color: var(--secondary-color);
font-weight: 600;
}

.team-details-content-text ul li {
margin-bottom: 17px;
display: block;
color: #65677a;
}

.team-details-content-text ul li span {
font-weight: 500;
margin-right: 15px;
font-size: 17px;
color: var(--primary-color);
}

.team-details-content-icon a {
margin: 3px;
background: var(--secondary-color);
line-height: 1;
display: inline-block;
border-radius: 3px;
color: #fff;
height: 35px;
width: 35px;
line-height: 35px;
text-align: center;
transition: 0.5s;
border: 1px solid var(--secondary-color);
}

.team-details-content-icon a:hover {
background: transparent;
border: 1px solid var(--secondary-color);
color: var(--secondary-color);
}
.skill-wrapper h6 {
margin-bottom: 8px;
margin-top: 20px;
}

.team-detail-title h2 {
font-size: 35px;
font-weight: 600;
}

.team-detail-title p {
font-size: 16px;
font-weight: 400;
color: #63636b;
margin-top: 40px;
}

/* Skill section */

.head-title h3 {
font-size: 38px;
margin-bottom: 10px;
margin-top: 5px;
font-weight: 800;
padding: 0px 0 15px;
}

.form-box select {
width: 100%;
height: 60px;
margin-bottom: 20px;
padding: 0 20px;
outline: 0;
display: inline-block;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(0, 37, 112, 0.5);
font-weight: 500;
font-family: "DM Sans";
color: #002570;
font-size: 17px;
}

/*
<!-- ============================================================== -->
<!-- mediic Start nav button-->
<!-- ============================================================== -->*/

.nav-btn.navSidebar-button {
display: inline-block;
}
.xs-sidebar-group .xs-overlay {
left: 100%;
top: 0;
position: fixed;
z-index: 101;
height: 100%;
opacity: 0;
width: 100%;
visibility: hidden;
-webkit-transition: all 0.4s ease-in 0.8s;
-o-transition: all 0.4s ease-in 0.8s;
transition: all 0.4s ease-in 0.8s;
}
.xs-sidebar-group .widget-heading {
position: absolute;
top: 0;
left: 0;
padding: 25px;
}
.xs-sidebar-widget {
position: fixed;
right: -100%;
top: 0;
bottom: 0;
width: 100%;
max-width: 360px;
z-index: 999999;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background-color: #272727;
-webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
-o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
visibility: hidden;
opacity: 0;
}
.xs-sidebar-group.isActive .xs-overlay {
opacity: 0.4;
visibility: visible;
-webkit-transition: all 0.8s ease-out 0s;
-o-transition: all 0.8s ease-out 0s;
transition: all 0.8s ease-out 0s;
left: 0;
}
.xs-sidebar-group.isActive .xs-sidebar-widget {
opacity: 1;
visibility: visible;
left: 0;
transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}
.sidebar-textwidget {
padding: 30px;
}
.close-side-widget i {
color: var(--secondary-color);
font-size: 28px;
display: block;
}
.sidebar-widget-container {
position: relative;
top: 150px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease-in 0.3s;
-o-transition: all 0.3s ease-in 0.3s;
transition: all 0.3s ease-in 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.xs-sidebar-group.isActive .sidebar-widget-container {
top: 0px;
opacity: 1;
visibility: visible;
-webkit-transition: all 1s ease-out 1.2s;
-o-transition: all 1s ease-out 1.2s;
transition: all 1s ease-out 1.2s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.xs-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.5;
z-index: 0;
}
.xs-bg-black {
background-color: #cda274;
}
.row.padding-two {
padding: 35px 0 11px 15px;
}
.contact-info h2 {
font-size: 26px;
font-weight: 400;
color: #fff;
padding-bottom: 5px;
}

ul.list-style-one li {
display: inline-flex;
list-style: none;
color: #fff;
padding: 16px 0 0;
font-size: 15px;
}

ul.list-style-one li span {
font-size: 22px;
font-weight: 500;
color: var(--secondary-color);
margin: 0 0 0 10px;
}

ul.social-box {
margin: 30px 0 0;
}
ul.social-box li {
display: inline-block;
list-style: none;
margin: 0 6px 0 0;
}

ul.social-box li a {
display: inline-block;
width: 35px;
height: 35px;
line-height: 36px;
text-align: center;
background: #fff;
color: var(--primary-color);
transition: 0.5s;
font-size: 16px;
font-weight: 400;
border-radius: 3px;
position: relative;
z-index: 1;
}

ul.social-box li a:hover {
color: #fff;
background: var(--secondary-color);
}
.content-thumb-box {
padding-bottom: 12px;
}
.content-thumb-box img {
width: 92%;
border-radius: 10px;
}

.nav-btn.navSidebar-button span i {
font-size: 20px;
display: inline-block;
cursor: pointer;
color: #fff;
width: 54px;
height: 54px;
line-height: 54px;
text-align: center;
background-color: #007eff;
border-radius: 30px;
align-content: center;
}

/*=============================================
mediic Start Search Popup
===============================================
***/

.search-box-btn i {
display: inline-block;
color: var(--primary-color);
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
transition: 0.5s;
background: #d7e8fc;
}

.style-2 .search-box-btn i {
width: 50px;
height: 50px;
line-height: 50px;
background-color: rgba(215, 231, 251, 0);
border: 1px solid #002570;
}

.search-popup {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
z-index: 99999;
margin-top: -540px;
transform: translateY(-100%);
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 1500ms cubic-bezier(0.86, 0, 0.07, 1);
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.search-popup {
width: 100%;
}

.search-active .search-popup {
transform: translateY(0%);
margin-top: 0;
}

.search-popup .close-search {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
margin-top: -200px;
border-radius: 50%;
text-align: center;
background-color: var(--primary-color);
width: 70px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-webkit-transition: all 500ms ease;
height: 70px;
line-height: 70px;
text-align: center;
}

.search-popup .close-search:before {
position: absolute;
content: "";
left: -6px;
top: -5px;
border-bottom: 5px solid #ffffff;
border-top: 5px solid var(--secondary-color);
border-right: 5px solid #fff;
border-left: 5px solid var(--secondary-color);
height: 74px;
width: 76px;
border-radius: 50%;
animation: spin 10s infinite alternate linear,
  glow 5s infinite alternate linear;
}

.search-active .search-popup .close-search {
visibility: visible;
opacity: 1;
top: 50%;
-webkit-transition-delay: 1500ms;
transition-delay: 1500ms;
}
.search-popup form {
position: absolute;
max-width: 700px;
top: 50%;
left: 15px;
right: 15px;
margin: -35px auto 0;
transform: scaleX(0);
transform-origin: center;
background-color: #111111;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.search-active .search-popup form {
transform: scaleX(1);
-webkit-transition-delay: 1200ms;
transition-delay: 1200ms;
}
.search-popup .form-group {
position: relative;
margin: 0px;
overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
position: relative;
display: block;
font-size: 18px;
line-height: 50px;
color: #000000;
height: 70px;
width: 100%;
padding: 10px 30px;
background-color: #ffffff;
transition: all 500ms ease;
font-weight: 500;
text-transform: capitalize;
}
.search-popup .form-group input[type="submit"],
.search-popup .form-group button {
position: absolute;
left: 30px;
top: 0px;
height: 70px;
line-height: 70px;
background: transparent;
text-align: center;
font-size: 22px;
color: var(--primary-color);
padding: 0;
cursor: pointer;
-webkit-transition: all 500ms ease;
border: none;
}
.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
color: #000000;
}
.search-popup .close-search.style-two {
position: absolute;
left: 25px;
right: auto;
color: #ffffff;
width: auto;
height: auto;
top: 25px;
margin: 0px;
border: none;
background: none !important;
box-shadow: none !important;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}

.search-popup .style-two.close-search:before {
position: inherit;
border: 0;
}

.flaticon-multiply:before {
content: inherit;
}
button.close-search i {
font-size: 25px;
color: #fff;
display: inline-block;
}
span.flaticon-multiply i {
display: inline-block;
color: var(--secondary-color);
}

/* Spin Animation */

@keyframes "spin" {
0% {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
100% {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
}
@-moz-keyframes spin {
0% {
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
}
100% {
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}
}
@-webkit-keyframes "spin" {
0% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
100% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
}
@-ms-keyframes "spin" {
0% {
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
100% {
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
}
@-o-keyframes "spin" {
0% {
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
100% {
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
}

/*============================
/* mediic Start Scroll Up Css 
==============================*/

#progress {
height: 70px;
width: 70px;
border-radius: 50%;
position: fixed;
bottom: 25px;
left: 25px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
display: grid;
place-items: center;
z-index: 99999;
cursor: pointer;
}

.progress.hide {
display: none !important;
transition: 0.5s !important;
}

#progress-value {
display: block;
height: calc(100% - 15px);
width: calc(100% - 15px);
background-color: #ffffff;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 600;
font-size: 20px;
font-family: "Pelak";
color: var(--primary-color);
}

/* Start  Curser pointer CSS */

.cursor {
position: fixed;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
border-radius: 50%;
border: 2px solid #00ffff;
transition: 0.3s;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1000;
}
.cursor2 {
position: fixed;
width: 4px;
height: 4px;
margin-left: -20px;
margin-top: -20px;
border-radius: 50%;
background-color: #fff;
transform: translate(-50%, -50%);
transition: 0.1s;
pointer-events: none;
z-index: 1000;
}

.grow,
.grow-small {
transform: scale(3);
background: white;
mix-blend-mode: difference;
border: none;
}

.grow-small {
transform: scale(1.7);
}

/* End curser point */

/*===========================
<-- mediic Start Loader Css -->
=============================*/
.loader-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
transition: 0.8s 1s ease;
z-index: 666;
}

.loader {
position: relative;
display: block;
z-index: 201;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
transition: all 1s 1s ease;
width: 48px;
height: 48px;
}

.loader:before,
.loader:after {
content: "";
display: block;
border: 32px solid transparent;
border-top-color: #00ffff;
position: absolute;
left: 0;
top: 0;
animation: weld-rotate 2s infinite ease-in;
}
.loader:before {
border-color: transparent transparent transparent var(--secondary-color);
animation-delay: 0.5s;
}
@keyframes weld-rotate {
0%,
25% {
  transform: rotate(0deg);
}
50%,
75% {
  transform: rotate(180deg);
}
100% {
  transform: rotate(360deg);
}
}

.loader-wrapper .loder-section {
position: fixed;
top: 0;
width: 50%;
height: 100%;
background: rgba(0, 0, 0, 100);
z-index: 2;
}

.loader-wrapper .loder-section.left-section {
left: 0;
transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
right: 0;
transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
left: -100%;
}

.loaded .loder-section.right-section {
right: -100%;
}

.loaded .loader-wrapper {
visibility: hidden;
}

.loaded .loader {
top: -100%;
opacity: 0;
}

/* Responsive */

@media (min-width: 1300px) and (max-width: 1370px) {
.service-section .swiper {
  height: 530px !important;
}
}

/* large Desktop */

@media (min-width: 1601px) and (max-width: 1770px) {
.service-section .swiper {
  height: 480px !important;
}
}
@-webkit-keyframes slideInDown {
from {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  visibility: visible;
}

to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
}

@keyframes slideInDown {
from {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  visibility: visible;
}

to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
}

.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
















/*****************************
 mediic Start Faq Accordion
*******************************/

.style-0.breatcome-section {
    margin-top: 0px;
}

.tab_container {
    overflow: hidden;
    padding: 105px 0 0;
}

.accordion-content h2 {
    font-size: 28px;
    font-weight: 700;
}

.accordion-content p {
    color: #002570;
    padding: 20px 0 32px;
}

.accordion li {
    list-style: none;
    padding: 0px 0px 25px;
}

    .accordion li a {
        position: relative;
        width: 100%;
        display: block;
        cursor: pointer;
        font-weight: 600;
        font-size: 20px;
        color: var(--primary-color) !important;
        background-color: rgba(255, 255, 255, 0.30196078431372547);
        border: 2px solid #ffffff;
        padding: 16px 20px 16px 25px;
        border-radius: 15px;
        z-index: 1;
    }

        .accordion li a span {
            font-size: 20px;
            color: var(--secondary-color);
            padding: 0 15px 0 0px;
            position: relative;
            z-index: 1;
        }

            .accordion li a span:before {
                position: absolute;
                content: "";
                top: -8px;
                right: -765px;
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background-color: rgba(255, 255, 255, 0.30196078431372547);
                border: 2px solid #ffffff;
            }

    .accordion li p {
        display: none;
        padding: 24px 15px 10px 25px;
        margin: 0;
        background: transparent;
        overflow: hidden;
        font-family: "DM Sans";
    }

.accordion a:before {
    width: 3px;
    height: 15px;
    background: var(--secondary-color);
    position: absolute;
    left: 41px;
    content: " ";
    top: 22px;
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.accordion a:after {
    width: 15px;
    height: 3px;
    background: var(--secondary-color);
    position: absolute;
    left: 35px;
    content: " ";
    top: 28px;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

/* Active */

.accordion a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.5s ease-in-out;
    background: #fff;
}

.accordion a.active:before {
    display: none;
}

.accordion a.active {
    background: var(--primary-color);
    color: #fff !important;
    border: 2px solid var(--primary-color);
}

.accordion li a.active span {
    color: #fff;
}

    .accordion li a.active span:before {
        background-color: var(--secondary-color);
        border: 2px solid var(--secondary-color);
    }

/* STyle 2 */

.faq-section .tab_container {
    padding: 120px 0 120px;
}

.style-2.accordion li p {
    display: none;
    padding: 24px 15px 30px 25px;
    margin: 0;
    background: #eef5ff;
    overflow: hidden;
    font-size: 16px;
    font-family: "Pelak";
    border-top: 0;
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.style-2.accordion li a span {
    padding: 0 0px 0 0px;
}

    .style-2.accordion li a span:before {
        right: -584px;
    }

.style-2.accordion li a.active span:before {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
}

/* Active */

.style-2.accordion a.active {
    background: #eef5ff;
    color: var(--primary-color) !important;
    border: 2px solid #fff;
    border-radius: 15px 15px 0 0;
    border-bottom: 2px solid #fff;
    padding: 18px 20px 22px 25px;
}

/* Accordion Style 2 */

.accordion2 li {
    list-style: none;
    padding: 0px 0px 25px;
}

    .accordion2 li a {
        position: relative;
        width: 100%;
        display: block;
        cursor: pointer;
        font-weight: 600;
        font-size: 20px;
        color: var(--primary-color) !important;
        background-color: rgba(255, 255, 255, 0.30196078431372547);
        border: 2px solid #ffffff;
        padding: 16px 20px 16px 25px;
        border-radius: 15px;
        z-index: 1;
    }

        .accordion2 li a span {
            font-size: 20px;
            color: var(--secondary-color);
            padding: 0 15px 0 0px;
            position: relative;
            z-index: 1;
        }

            .accordion2 li a span:before {
                position: absolute;
                content: "";
                top: -8px;
                right: -584px;
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background-color: rgba(255, 255, 255, 0.30196078431372547);
                border: 2px solid #ffffff;
            }

.style-2.accordion2 li a span {
    padding: 0 0px 0 0px;
}

.accordion2 li p {
    display: none;
    padding: 24px 15px 30px 25px;
    margin: 0;
    background: #eef5ff;
    overflow: hidden;
    font-size: 16px;
    font-family: "Pelak";
    border-top: 0;
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.accordion2 a:before {
    width: 3px;
    height: 15px;
    background: var(--secondary-color);
    position: absolute;
    left: 41px;
    content: " ";
    top: 22px;
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.accordion2 a:after {
    width: 15px;
    height: 3px;
    background: var(--secondary-color);
    position: absolute;
    left: 35px;
    content: " ";
    top: 28px;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

/* Active */

.accordion2 a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.5s ease-in-out;
    background: #fff;
}

.accordion2 a.active:before {
    display: none;
}

.accordion2 a.active {
    background: #eef5ff;
    color: var(--primary-color) !important;
    border: 2px solid #fff;
    border-radius: 15px 15px 0 0;
    border-bottom: 2px solid #fff;
    padding: 18px 20px 22px 25px;
}

.accordion2 li a.active span:before {
    background-color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

/* Style upp */

.upp.faq-section .tab_container {
    padding: 0px 0 120px;
}

.upp.style-2.accordion li a {
    font-size: 18px;
}

    .upp.style-2.accordion li a span:before {
        right: -1245px;
    }
