/**
* Template Name: Medicio
* Updated: May 30 2023 with Bootstrap v5.3.0
* Template URL: https://bootstrapmade.com/medicio-free-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body { font-family: "Open Sans", sans-serif; color: #555; font-size:16px; background:url(../../bcg/pattern.jpg)no-repeat center center fixed;   -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

a { color: #040561; text-decoration: none; }
a:hover { color: #4DA6FF; text-decoration: none; }

h1,h2  { font-family: "Roboto", sans-serif; font-weight:600; color: #040561; text-transform:uppercase; margin-bottom:1rem;  }
h4,h3{ font-family: "Roboto", sans-serif; font-weight:700;color: #040561; }

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: 15px; z-index: 996; background: #040561; width: 40px; height: 40px; border-radius: 4px; transition: all 0.4s; }

.back-to-top i { font-size: 28px; color: #fff; line-height: 0; }

.back-to-top:hover { background: #5ec6ca; color: #fff; }

.back-to-top.active { visibility: visible; opacity: 1; }

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) { [data-aos-delay] {   transition-delay: 0 !important; }}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar { background: #FFF; color: #888; height: 40px; font-size: 0.9rem; font-weight: 600; z-index: 996; transition: all 0.5s; }
#topbar.topbar-scrolled { top: -40px; }
#topbar i { padding-right: 6px; line-height: 0; }
#topbar .social-links a i{ font-size: 1.5rem; display: inline-block;  color: #040561; line-height: 1; padding: 8px 0; margin-right:6px; border-radius: 4px; text-align: center;  transition: 0.3s; }


#topbar .social-links a:hover i{ color: #4DA6FF; text-decoration: none; }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header { background: #FEFEFE; transition: all 0.5s; z-index: 997; padding: 20px 0; top: 40px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); }

@media (max-width: 992px) { #header {   padding: 15px 0; }}

#header.header-scrolled { top: 0; }
#header .logo img { max-height:100px; }

/**
* Appointment Button
*/
.appointment-btn { margin-left: 25px; background: #040561; color: #fff; border-radius: 4px; padding: 8px 25px; white-space: nowrap; transition: 0.3s; font-size: 14px; display: inline-block; }

.appointment-btn:hover { background: #4DA6FF; color: #fff; }

@media (max-width: 768px) { .appointment-btn {   margin: 0 15px 0 0;   padding: 6px 15px; }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar { padding: 0; }

.navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; }

.navbar li { position: relative; }

.navbar a,.navbar a:focus { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 10px 20px; font-family: "Roboto", sans-serif; font-size: 1rem; color: #040561; white-space: nowrap; transition: 0.3s; text-transform: uppercase; font-weight: 600; }

.navbar a i,.navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; }

.navbar a:hover,.navbar .active,.navbar .active:focus,.navbar li:hover>a { color: #4DA6FF; }

.navbar .dropdown ul { display: block; position: absolute; left: 14px; top: calc(100% + 30px); margin: 0; padding: 10px 0; z-index: 99; opacity: 0; visibility: hidden; background: #040561; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: 0.3s; border-radius: 4px; }

.navbar .dropdown ul li { min-width: 200px; }

.navbar .dropdown ul a { padding: 10px 20px; text-transform: none; color:#FFF; }

.navbar .dropdown ul a i { font-size: 12px; }

.navbar .dropdown ul a:hover,.navbar .dropdown ul .active:hover,.navbar .dropdown ul li:hover>a { color: #4DA6FF; }

.navbar .dropdown:hover>ul { opacity: 1; top: 100%; visibility: visible; }

.navbar .dropdown .dropdown ul { top: 0; left: calc(100% - 30px); visibility: hidden; }

.navbar .dropdown .dropdown:hover>ul { opacity: 1; top: 0; left: 100%; visibility: visible; }

@media (max-width: 1366px) { .navbar .dropdown .dropdown ul {   left: -90%; }

  .navbar .dropdown .dropdown:hover>ul {   left: -100%; }
}

.navbar #members {background:#4DA6FF; margin-left:0.5rem; text-align:center; padding-right:2rem; border-radius:20px;}
.navbar #members:hover {color:#FFF;}



/**
* Mobile Navigation 
*/
.mobile-nav-toggle { color: #4DA6FF; font-size: 2rem; cursor: pointer; display: none; line-height: 0; transition: 0.5s; }

.mobile-nav-toggle.bi-x { color: #fff; }

@media (max-width: 991px) { .mobile-nav-toggle {   display: block; }

  .navbar ul {   display: none; }
}

.navbar-mobile { position: fixed; overflow: hidden; top: 0; right: 0; left: 0; bottom: 0; background: rgba(60, 60, 60, 0.9); transition: 0.3s; z-index: 999; }

.navbar-mobile .mobile-nav-toggle { position: absolute; top: 15px; right: 15px; }

.navbar-mobile ul { display: block; position: absolute; top: 55px; right: 15px; bottom: 15px; left: 15px; padding: 10px 0; border-radius: 8px; background-color: #fff; overflow-y: auto; transition: 0.3s; }

.navbar-mobile a, .navbar-mobile a:focus { padding: 10px 20px; font-size: 15px; color: #555555; }

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a { color: #040561; }

.navbar-mobile .dropdown ul { position: static; display: none; margin: 10px 20px; padding: 10px 0; z-index: 99; opacity: 1; visibility: visible; background:#4DA6FF; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); }

.navbar-mobile .dropdown ul li { min-width: 200px; }

.navbar-mobile .dropdown ul a { padding: 10px 20px; color: #fff;}

.navbar-mobile .dropdown ul a i { font-size: 12px; }

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a { color: #040561; }

.navbar-mobile .dropdown>.dropdown-active { display: block; }

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero { width: 100%; height:100vh; background-color: rgba(60, 60, 60, 0.8); overflow: hidden; position: relative; }

#hero .carousel,#hero .carousel-inner,#hero .carousel-item,#hero .carousel-item::before { position: absolute; top: 0; right: 0; left: 0; bottom: 0; }
#hero .carousel-item { background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: flex-end; }

#hero .container { padding-top: 30px; padding-bottom: 30px; margin-bottom: 50px; }
#hero .container .row .col-sm-6 {background: rgba(77, 166, 255, 0.6); padding: 3rem 2rem;}

@media (max-width: 1200px) { #hero .container {   margin-left: 50px;   margin-right: 50px; }}

#hero .carousel-item h2 { color: #040561; margin-bottom: 20px; font-size: 3rem; font-weight: 700; }
#hero .carousel-item p { margin: 0 auto 30px auto; color: #000; font-size: 1.3rem; font-weight: 700; }

#hero .carousel-inner .carousel-item { transition-property: opacity; background-position: center top; }
#hero .carousel-inner .carousel-item,#hero .carousel-inner .active.carousel-item-start,#hero .carousel-inner .active.carousel-item-end { opacity: 0; }
#hero .carousel-inner .active,#hero .carousel-inner .carousel-item-next.carousel-item-start,#hero .carousel-inner .carousel-item-prev.carousel-item-end { opacity: 1; transition: 0.5s; }
#hero .carousel-inner .carousel-item-next,#hero .carousel-inner .carousel-item-prev,#hero .carousel-inner .active.carousel-item-start,#hero .carousel-inner .active.carousel-item-end { left: 0; transform: translate3d(0, 0, 0); }

#hero .carousel-control-next-icon,#hero .carousel-control-prev-icon { background: none; font-size: 30px; line-height: 0; width: auto; height: auto; background: rgba(77, 166, 255, 0.8); border-radius: 50px; transition: 0.3s; color: rgba(255, 255, 255, 0.5); width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }

#hero .carousel-control-next-icon:hover,#hero .carousel-control-prev-icon:hover { background: #040561; color: rgba(255, 255, 255, 0.8); }

#hero .carousel-indicators li { cursor: pointer; background: #4DA6FF; overflow: hidden; border: 0; width: 12px; height: 12px; border-radius: 50px; opacity: 0.6; transition: 0.3s; }

#hero .carousel-indicators li.active { opacity: 1; background: #040561; }

#hero .btn-get-started { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 1rem; letter-spacing: 1px; display: inline-block; padding: 14px 32px; border-radius: 25px; transition: 0.5s; line-height: 1; color: #fff; background: #4DA6FF; border: 2px solid #FFF;text-transform:uppercase; }

#hero .btn-get-started:hover { background: #040561; }



@media (max-width: 992px) { #hero {   height: 100vh; }

  #hero .container {   margin-top: 100px; }
}

@media (max-width: 768px) { #hero h2 {   font-size: 28px; }
}

@media (min-width: 1024px) {

  #hero .carousel-control-prev,
  #hero .carousel-control-next {   width: 5%; }
}

@media (max-height: 500px) { #hero {   height: 160vh; }
}



/*--------------------------------------------------------------
# MAIN AREA
--------------------------------------------------------------*/

#main{}

#main .MainText{min-height:500px;}

#main .MainText h2{font-size:2rem; text-transform:uppercase;font-weight:600; margin-top:2rem; margin-bottom:2rem;}

#main .MainText h3{font-size:1.4rem; margin-top:2rem; margin-bottom:1rem;}
#main .MainText h4{font-size:1.2rem; margin-top:2rem; margin-bottom:1rem;}

#main .product_box h3 {font-size:1.3rem; text-transform:uppercase; color:#FFF; font-weight:600; margin-top:2rem; margin-bottom:1rem;}

#main h3 {font-size:1.3rem; text-transform:uppercase; color:#0606A8; font-weight:600; margin-top:2rem; margin-bottom:1rem;}

#main table { width: 100%; font-weight:600;}
#main table thead tr th { color: #FFF; border-right:1px solid #FFF; background: #4DA6FF; padding: 10px 0 13px;}
#main table thead tr th:last-child {border-right:none; }
#main table thead tr th { text-align: center;}
#main table tbody {border-top: none; border-bottom: none;}
#main table tbody tr {background-color:#EDEDFE; border-bottom:1px solid #FFF; }
#main table tbody tr:nth-child(even) { background-color:#E2E2FE;}
#main table tbody tr td { text-align: center;color: #040561; padding: 5px 10px; min-width: 130px;}
#main table tbody tr td.image {width:25%;}
#main table tbody tr td.image img {width:100%;}


.marg-2{margin-top:2rem;margin-bottom:2rem;}

.TopBanner { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../../bcg/coins.jpg") center center; background-size: cover; padding: 100px 0; height:300px;}

.TopBannerProducts { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../../bcg/Products.jpg") center center; background-size: cover; padding: 100px 0; height:300px;}

.TopBannerResources{ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../../bcg/Resources.jpg") center center; background-size: cover; padding: 100px 0; height:300px;}

.TopBannerFAQs{ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../../bcg/FAQs.jpg") center center; background-size: cover; padding: 100px 0; height:300px;}

.TopBannerContacts{ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../../bcg/Contacts.jpg") center center; background-size: cover; padding: 100px 0; height:300px;}

@media (min-width: 1365px) { .TopBanner, .TopBannerProducts, .TopBannerResources, .TopBannerContacts,.TopBannerFAQs {   background-attachment: fixed; }}



/***GENERAL**/

.divider {width:60px; height: 3px; background: #4DA6FF; margin-bottom:1rem;}



/***BUTTONS**/
.readmore-btn { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 10px 35px; border-radius: 25px; transition: 0.5s; margin-top: 10px; border: 2px solid #040561; color: #040561; text-transform:uppercase; }

.readmore-btn:hover { background: #040561; color: #FFF; }

.prod-btn { margin-left:2rem; margin-top: 0;  font-family: "Roboto", sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 1px; display: inline-block; padding: 10px 35px; transition: 0.5s; border: 2px solid #4DA6FF; color: #4DA6FF; text-transform:uppercase; }

.prod-btn:hover { background: #4DA6FF; color: #FFF; }



/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs { padding: 15px 0; background: #040561;}
.breadcrumbs a { color: #FFF; text-decoration: none;}
.breadcrumbs a:hover { color: #4DA6FF; text-decoration: none;}

.breadcrumbs h2 { font-size: 1.2rem; font-weight:600; margin: 0; color:#FFF;}
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: 0.8rem;color: #4DA6FF;}
.breadcrumbs ol li+li { padding-left: 10px;}
.breadcrumbs ol li+li::before { display: inline-block; padding-right: 10px; color: #676775; content: "/";}

@media (max-width: 992px) { .breadcrumbs .d-flex {   display: block !important; }

  .breadcrumbs h2 {   margin-bottom: 10px; }
  .breadcrumbs ol {   display: block; }
  .breadcrumbs ol li {   display: inline-block; }
}


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section { padding: 60px 0; overflow: hidden; }

.section-bg { background-color: #f7fcfc; }

.section-title { text-align: center; padding-bottom: 30px; }

.section-title h2 { font-size: 2rem; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 20px; position: relative; color:#040561; }
.section-title h2::after { content: ""; position: absolute; display: block; width: 50px; height: 3px; background: #4DA6FF; bottom: 0; left: calc(50% - 25px); }

.section-title p { margin-bottom: 0; }



/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
#main .about .content h3 { font-size:2rem; }
.about .content ul { list-style: none; padding: 0; }
.about .content ul li { padding-bottom: 10px; list-style-type: disc; margin-left:1rem;}

.about .content ul i { font-size: 20px; padding-right: 4px; color: #040561; }

.about .content p:last-child { margin-bottom: 0; }


/*--------------------------------------------------------------
# PRODUCTS
--------------------------------------------------------------*/

.our_products .icon-box {position: relative; overflow: hidden; box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12); transition: all 0.3s ease-in-out; border-radius: 8px; z-index: 1;background: #040561;}
.our_products .icon-box:hover {background: #4DA6FF; }

.icon-box img {width:100%;}

.our_products .title { ;font-weight: 700; text-align:center; margin-bottom: 15px; font-size: 1.4rem; padding:1rem 0; }

.our_products a h4.title , .our_products a h4.title:hover {  color:#FFF; }

.tabulation .nav-pills .nav-item {  margin-bottom:0;padding:0.2rem 1rem;  }
.tabulation .nav-pills .nav-item .nav-link {text-align:left; color: #040561;  font-weight:700; border-radius:0; }
.tabulation .nav-pills .nav-item .nav-link.active { background:#4DA6FF; color: #FFF; }


.tabulation .tab-content { padding: 0; }
.tabulation .tab-content h3 { font-weight: 600; }

.tab-content > .tab-pane {  display: none; }
.tab-content > .tab-pane h5 {border-bottom: 1px solid #040561; padding-bottom:10px; margin-bottom:1rem;  color: #040561; font-weight: 700; }

.tab-content > .tab-pane ul li {list-style:circle; }
.tab-content > .active {  display: block; }

.tabulation .listed ul li {list-style-type: circle; margin-left:2rem; }

/*--------------------------------------------------------------
# LOAN CALCULATOR
--------------------------------------------------------------*/
.loan_calculator .php-email-form { width: 100%; }
.loan_calculator .php-email-form { width: 100%; }

.loan_calculator .php-email-form .form-group { padding-bottom: 8px; }

.loan_calculator .php-email-form .validate { display: none; color: red; margin: 0 0 15px 0; font-weight: 400; font-size: 13px; }

.loan_calculator .php-email-form .error-message { display: none; color: #fff; background: #ed3c0d; text-align: left; padding: 15px; font-weight: 600; }

.loan_calculator .php-email-form .error-message br+br { margin-top: 25px; }

.loan_calculator .php-email-form .sent-message { display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600; }

.loan_calculator .php-email-form .loading { display: none; background: #fff; text-align: center; padding: 15px; }

.loan_calculator .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #18d26e; border-top-color: #eee; animation: animate-loading 1s linear infinite; }

.loan_calculator .php-email-form input,
.loan_calculator .php-email-form textarea,
.loan_calculator .php-email-form select { border-radius: 0; box-shadow: none; font-size: 14px; padding: 10px !important; }

.loan_calculator .php-email-form input:focus,
.loan_calculator .php-email-form textarea:focus,
.loan_calculator .php-email-form select:focus { border-color: #040561; }

.loan_calculator .php-email-form input,
.loan_calculator .php-email-form select { height: 44px; }

.loan_calculator .php-email-form textarea { padding: 10px 12px; }

.loan_calculator .php-email-form button[type=submit] {margin-top:2rem; background: #040561; border: 0; padding: 10px 35px; color: #fff; transition: 0.4s; border-radius: 50px;  border: 2px solid #FFF; }

.loan_calculator .php-email-form button[type=submit]:hover { background: #4DA6FF; }

.error{ color:#FFF; padding: 2rem; margin:2rem auto; -moz-border-radius:0.3em; background: #F00 ;}

.error p, .successful p { width:100%;}

.successful{ padding: 2rem; margin:2rem auto; -moz-border-radius:0.3em; color:#000; background: #9C0;}	

.Results{ background: #AF5; color:#000; padding: 2rem; margin:2rem auto; -moz-border-radius:0.3em;}	

/*--------------------------------------------------------------
# profiles
--------------------------------------------------------------*/
.profiles .member { margin-bottom: 20px; overflow: hidden; text-align: center; border-radius: 4px; background: #fff; box-shadow: 0px 2px 15px rgba(63, 187, 192, 0.1); }

.profiles .member .member-img { position: relative; overflow: hidden; }

.profiles .member .social { position: absolute; left: 0; bottom: 0; right: 0; height: 40px; opacity: 0; transition: ease-in-out 0.3s; background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; }

.profiles .member .social a { transition: color 0.3s; color: #555555; margin: 0 10px; display: inline-flex; align-items: center; justify-content: center; }

.profiles .member .social a i { line-height: 0; }

.profiles .member .social a:hover { color: #040561; }

.profiles .member .social i { font-size: 18px; margin: 0 2px; }

.profiles .member .member-info { padding: 25px 15px; }

.profiles .member .member-info h4 { font-weight:500; margin-bottom: 5px; font-size: 1.1rem; color: #4DA6FF; }

.profiles .member .member-info span {font-weight:700;  display: block; font-size: 0.9rem; color: #040561; }

.profiles .member .member-info p { font-style: italic; font-size: 14px; line-height: 26px; color: #777777; }

.profiles .member:hover .social { opacity: 1; }


/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box { color: #444444; text-align: center; box-shadow: 0 0 20px rgba(214, 215, 216, 0.5); padding: 20px 0 30px 0; }

.contact .info-box i { font-size: 32px; color: #040561; border-radius: 50%; padding: 8px; border: 2px dotted #c5ebec; }

.contact .info-box h3 { font-size: 20px; color: #777777; font-weight: 700; margin: 10px 0; }

.contact .info-box p { padding: 0; line-height: 24px; font-size: 14px; margin-bottom: 0; }

.contact .php-email-form { box-shadow: 0 0 20px rgba(214, 215, 216, 0.5); padding: 30px; }

.contact .php-email-form .error-message { display: none; color: #fff; background: #ed3c0d; text-align: left; padding: 15px; font-weight: 600; }

.contact .php-email-form .error-message br+br { margin-top: 25px; }

.contact .php-email-form .sent-message { display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600; }

.contact .php-email-form .loading { display: none; background: #fff; text-align: center; padding: 15px; }

.contact .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #18d26e; border-top-color: #eee; animation: animate-loading 1s linear infinite; }

.contact .php-email-form input,
.contact .php-email-form textarea { border-radius: 4px; box-shadow: none; font-size: 14px; }

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus { border-color: #040561; }

.contact .php-email-form input { padding: 10px 15px; }

.contact .php-email-form textarea { padding: 12px 15px; }

.contact .php-email-form button[type=submit] {margin-top:2rem; font-weight: 600;  color: #040561; border:2px solid  #040561; padding: 10px 35px; transition: 0.4s; border-radius:50px; text-transform:uppercase; }

.contact .php-email-form button[type=submit]:hover { background: #4DA6FF; color: #FFF;  border:2px solid  #4DA6FF; }



@keyframes animate-loading { 0% {   transform: rotate(0deg); }

  100% {   transform: rotate(360deg); }
}


/*--------------------------------------------------------------
# Featured Services
--------------------------------------------------------------*/
.featured-services .icon-box { padding: 30px; position: relative; overflow: hidden; background: #fff; box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12); transition: all 0.3s ease-in-out; border-radius: 8px; z-index: 1; }

.featured-services .icon-box::before { content: ""; position: absolute; background: #d9f1f2; right: 0; left: 0; bottom: 0; top: 100%; transition: all 0.3s; z-index: -1; }

.featured-services .icon-box:hover::before { background: #040561; top: 0; border-radius: 0px; }

.featured-services .icon { margin-bottom: 15px; }

.featured-services .icon i { font-size: 48px; line-height: 1; color: #040561; transition: all 0.3s ease-in-out; }

.featured-services .title { font-weight: 700; margin-bottom: 15px; font-size: 18px; }

.featured-services .title a { color: #111; }

.featured-services .description { font-size: 15px; line-height: 28px; margin-bottom: 0; }

.featured-services .icon-box:hover .title a,
.featured-services .icon-box:hover .description { color: #fff; }

.featured-services .icon-box:hover .icon i { color: #fff; }

/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta { background: #040561; color: #fff; background-size: cover; padding: 60px 0; }

.cta h3 { font-size: 28px; font-weight: 700; }

.cta .cta-btn { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 10px 35px; border-radius: 25px; transition: 0.5s; margin-top: 10px; border: 2px solid #fff; color: #fff; }

.cta .cta-btn:hover { background: #fff; color: #040561; }



/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts { padding-bottom: 30px; }

.counts .count-box { box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1); padding: 30px; width: 100%; }

.counts .count-box i { display: block; font-size: 30px; color: #040561; float: left; }

.counts .count-box span { font-size: 42px; line-height: 24px; display: block; font-weight: 700; color: #555555; margin-left: 50px; }

.counts .count-box p { padding: 30px 0 0 0; margin: 0; font-family: "Roboto", sans-serif; font-size: 14px; }

.counts .count-box a { font-weight: 600; display: block; margin-top: 20px; color: #7b7b7b; font-size: 15px; font-family: "Poppins", sans-serif; transition: ease-in-out 0.3s; }

.counts .count-box a:hover { color: #040561; }

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features .icon-box h4 { font-size: 20px; font-weight: 700; margin: 5px 0 10px 60px; }

.features .icon-box i { font-size: 48px; float: left; color: #040561; }

.features .icon-box p { font-size: 15px; color: #848484; margin-left: 60px; }

.features .image { background-position: center center; background-repeat: no-repeat; background-size: cover; min-height: 400px; }

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box { margin-bottom: 20px; text-align: center; }

.services .icon { display: inline-flex; justify-content: center; align-items: center; width: 80px; height: 80px; margin-bottom: 20px; background: #fff; border-radius: 50%; transition: 0.5s; color: #040561; overflow: hidden; box-shadow: 0px 0 25px rgba(0, 0, 0, 0.15); }

.services .icon i { font-size: 36px; line-height: 0; }

.services .icon-box:hover .icon { box-shadow: 0px 0 25px rgba(63, 187, 192, 0.3); }

.services .title { font-weight: 600; margin-bottom: 15px; font-size: 18px; position: relative; padding-bottom: 15px; }

.services .title a { color: #444444; transition: 0.3s; }

.services .title a:hover { color: #040561; }

.services .title::after { content: ""; position: absolute; display: block; width: 50px; height: 2px; background: #040561; bottom: 0; left: calc(50% - 25px); }

.services .description { line-height: 24px; font-size: 14px; }

/*--------------------------------------------------------------
# Appointments
--------------------------------------------------------------*/
.appointment .php-email-form { width: 100%; }

.appointment .php-email-form .form-group { padding-bottom: 8px; }

.appointment .php-email-form .validate { display: none; color: red; margin: 0 0 15px 0; font-weight: 400; font-size: 13px; }

.appointment .php-email-form .error-message { display: none; color: #fff; background: #ed3c0d; text-align: left; padding: 15px; font-weight: 600; }

.appointment .php-email-form .error-message br+br { margin-top: 25px; }

.appointment .php-email-form .sent-message { display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600; }

.appointment .php-email-form .loading { display: none; background: #fff; text-align: center; padding: 15px; }

.appointment .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #18d26e; border-top-color: #eee; animation: animate-loading 1s linear infinite; }

.appointment .php-email-form input,
.appointment .php-email-form textarea,
.appointment .php-email-form select { border-radius: 0; box-shadow: none; font-size: 14px; padding: 10px !important; }

.appointment .php-email-form input:focus,
.appointment .php-email-form textarea:focus,
.appointment .php-email-form select:focus { border-color: #040561; }

.appointment .php-email-form input,
.appointment .php-email-form select { height: 44px; }

.appointment .php-email-form textarea { padding: 10px 12px; }

.appointment .php-email-form button[type=submit] { background: #040561; border: 0; padding: 10px 35px; color: #fff; transition: 0.4s; border-radius: 50px; }

.appointment .php-email-form button[type=submit]:hover { background: #52c2c6; }

/*--------------------------------------------------------------
# Departments
--------------------------------------------------------------*/
.departments .nav-tabs { border: 0; }

.departments .nav-link { border: 0; padding: 20px; color: #555555; border-radius: 0; border-left: 5px solid #fff; cursor: pointer; }

.departments .nav-link h4 { font-size: 18px; font-weight: 600; transition: 0.3s; }

.departments .nav-link p { font-size: 14px; margin-bottom: 0; }

.departments .nav-link:hover h4 { color: #040561; }

.departments .nav-link.active { background: #f7fcfc; border-color: #040561; }

.departments .nav-link.active h4 { color: #040561; }

.departments .tab-pane.active { animation: slide-down 0.5s ease-out; }

.departments .tab-pane img { float: left; max-width: 300px; padding: 0 15px 15px 0; }

@media (max-width: 768px) { .departments .tab-pane img {   float: none;   padding: 0 0 15px 0;   max-width: 100%; }
}

.departments .tab-pane h3 { font-size: 26px; font-weight: 600; margin-bottom: 20px; color: #040561; }

.departments .tab-pane p { color: #777777; }

.departments .tab-pane p:last-child { margin-bottom: 0; }

@keyframes slide-down { 0% {   opacity: 0; }

  100% {   opacity: 1; }
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider { overflow: hidden; }

.testimonials .testimonial-item { box-sizing: content-box; min-height: 320px; }

.testimonials .testimonial-item .testimonial-img { width: 90px; border-radius: 50%; margin: -40px 0 0 40px; position: relative; z-index: 2; border: 6px solid #fff; }

.testimonials .testimonial-item h3 { font-size: 18px; font-weight: bold; margin: 10px 0 5px 45px; color: #111; }

.testimonials .testimonial-item h4 { font-size: 14px; color: #999; margin: 0 0 0 45px; }

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right { color: #b2e4e6; font-size: 26px; }

.testimonials .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative; }

.testimonials .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px; }

.testimonials .testimonial-item p { font-style: italic; margin: 0 15px 0 15px; padding: 20px 20px 60px 20px; background: #f0fafa; position: relative; border-radius: 6px; position: relative; z-index: 1; }

.testimonials .swiper-pagination { margin-top: 20px; position: relative; }

.testimonials .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #fff; opacity: 1; border: 1px solid #040561; }

.testimonials .swiper-pagination .swiper-pagination-bullet-active { background-color: #040561; }

/*--------------------------------------------------------------
# Doctors
--------------------------------------------------------------*/
.doctors .member { margin-bottom: 20px; overflow: hidden; text-align: center; border-radius: 4px; background: #fff; box-shadow: 0px 2px 15px rgba(63, 187, 192, 0.1); }

.doctors .member .member-img { position: relative; overflow: hidden; }

.doctors .member .social { position: absolute; left: 0; bottom: 0; right: 0; height: 40px; opacity: 0; transition: ease-in-out 0.3s; background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; }

.doctors .member .social a { transition: color 0.3s; color: #555555; margin: 0 10px; display: inline-flex; align-items: center; justify-content: center; }

.doctors .member .social a i { line-height: 0; }

.doctors .member .social a:hover { color: #040561; }

.doctors .member .social i { font-size: 18px; margin: 0 2px; }

.doctors .member .member-info { padding: 25px 15px; }

.doctors .member .member-info h4 { font-weight: 700; margin-bottom: 5px; font-size: 18px; color: #555555; }

.doctors .member .member-info span { display: block; font-size: 13px; font-weight: 400; color: #aaaaaa; }

.doctors .member .member-info p { font-style: italic; font-size: 14px; line-height: 26px; color: #777777; }

.doctors .member:hover .social { opacity: 1; }

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery { overflow: hidden; }

.gallery .swiper-pagination { margin-top: 20px; position: relative; }

.gallery .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #fff; opacity: 1; border: 1px solid #040561; }

.gallery .swiper-pagination .swiper-pagination-bullet-active { background-color: #040561; }

.gallery .swiper-slide-active { text-align: center; }

@media (min-width: 992px) { .gallery .swiper-wrapper {   padding: 40px 0; }

  .gallery .swiper-slide-active {   border: 6px solid #040561;   padding: 4px;   background: #fff;   z-index: 1;   transform: scale(1.2);   margin-top: 10px; }
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box { padding: 20px; background: #fff; text-align: center; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12); border-radius: 4px; position: relative; overflow: hidden; }

.pricing h3 { font-weight: 400; margin: -20px -20px 20px -20px; padding: 20px 15px; font-size: 16px; font-weight: 600; color: #777777; background: #f8f8f8; }

.pricing h4 { font-size: 36px; color: #040561; font-weight: 600; font-family: "Poppins", sans-serif; margin-bottom: 20px; }

.pricing h4 sup { font-size: 20px; top: -15px; left: -3px; }

.pricing h4 span { color: #bababa; font-size: 16px; font-weight: 300; }

.pricing ul { padding: 0; list-style: none; color: #444444; text-align: center; line-height: 20px; font-size: 14px; }

.pricing ul li { padding-bottom: 16px; }

.pricing ul i { color: #040561; font-size: 18px; padding-right: 4px; }

.pricing ul .na { color: #ccc; text-decoration: line-through; }

.pricing .btn-wrap { margin: 20px -20px -20px -20px; padding: 20px 15px; background: #f8f8f8; text-align: center; }

.pricing .btn-buy { background: #040561; display: inline-block; padding: 8px 35px 10px 35px; border-radius: 4px; color: #fff; transition: none; font-size: 14px; font-weight: 400; font-family: "Roboto", sans-serif; font-weight: 600; transition: 0.3s; }

.pricing .btn-buy:hover { background: #4DA6FF; }

.pricing .featured h3 { color: #fff; background: #040561; }

.pricing .advanced { width: 200px; position: absolute; top: 18px; right: -68px; transform: rotate(45deg); z-index: 1; font-size: 14px; padding: 1px 0 3px 0; background: #040561; color: #fff; }

/*--------------------------------------------------------------
# Frequently Asked Questioins
--------------------------------------------------------------*/
.faq { padding: 60px 0; }

.faq .faq-list { padding: 0; list-style: none; }

.faq .faq-list li { border-bottom: 1px solid #d9f1f2; margin-bottom: 20px; padding-bottom: 20px; }

.faq .faq-list .question { display: block; position: relative; font-family: #040561; font-size: 18px; line-height: 24px; font-weight: 400; padding-left: 25px; cursor: pointer; color: #32969a; transition: 0.3s; }

.faq .faq-list i { font-size: 16px; position: absolute; left: 0; top: -2px; }

.faq .faq-list p { margin-bottom: 0; padding: 10px 0 0 25px; }

.faq .faq-list .icon-show { display: none; }

.faq .faq-list .collapsed { color: black; }

.faq .faq-list .collapsed:hover { color: #040561; }

.faq .faq-list .collapsed .icon-show { display: inline-block; transition: 0.6s; }

.faq .faq-list .collapsed .icon-close { display: none; transition: 0.6s; }


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer { background: #040561; padding:3rem 0; color: #FFF; font-size: 1rem; }

#footer .footer-info { margin-bottom: 30px; }
#footer .footer-info h4 { font-size: 1.2rem; margin: 0 0 20px 0; padding: 2px 0 2px 0; line-height: 1;}
#footer .footer-info p {line-height: 24px; margin-bottom: 0;}

#footer .social-links {padding:1rem 0; }
#footer .social-links a { font-size: 2rem; display: inline-block; color: #4DA6FF; line-height: 1; padding: 8px 0; margin-right:10px;   transition: 0.3s; }
#footer .social-links a:hover { color: #FFF; text-decoration: none; }

#footer .copyright { text-align: center; padding-top: 30px; border-top:1px solid #AAA; }
#footer .copyright a {color: #4DA6FF; transition: 0.3s; }
#footer .copyright a:hover { color: #FFF; text-decoration: none; }