/*
Theme Name: HealthCare
Theme URI: http://themewagon.com/demo/HealthCare/
Author: ThemeWagon
Author URI: http://themewagon.com/
Description: A responsive theme for commercial medical purpose. Built with HTML5, CSS3, Bootstrap framework. Google fonts, Font Awesome Icon integrated
Version: 1.1.2014.11
License: GNU General Public License v3
License URI: http://www.gnu.org/licenses/gpl-3.0.txt
Tags: responsive layout, multiple-page, parallax 
Text Domain:
*/

/**
 * Table of Contents:
 *
 * 1. - Home
        1.1 - heading-slider
        1.2 - starting-text
        1.3 - reason for choice
        1.4 - testimonial
 * 2. - Service
 * 3. - Doctor
        3.1 - doctor-list
        3.2 - job
 * 4. - Blog
 * 5. - FAQ
 * 6. - Gallery
 * 7. - Contact
 * -----------------------------------------------------------------------------
 */

 * {outline: none !important;}


/*============================================Global============================================ */
ul li
{
    list-style: none;
    display: inline-block;
}
li a
{
    text-decoration: none;
}
.form-control, .input-group-addon
{
    border-radius: 0px;
}
.title
{
    padding: 50px 0px;
    margin-top: 65px
}
a 
{
    color: darkcyan;
}
a:hover
{
    text-decoration: none;
}

.btn {
    font-family: 'Raleway', sans-serif;
}

.pagination
{
    border-radius: 0px;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    background-color: #46A1B4;
    border-color: #5FA8AB;
}
.pagination>li>a, .pagination>li>span {

color: #085A6C;
background-color: #fff;
border: 1px solid #ddd;
}

p
{
    font-family: 'Dosis', sans-serif;
    word-spacing: 3px;
    font-size: 17px;
}
h1, h2, h3, h4, h5, h6
{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
.send 
{
    margin-bottom: 20px;
}

.owl-pagination 
{
    display: none;
}

/* ----------------------------------------Header --------------------------------------------*/
.section-title
{
    background: url(../img/6177817673_5ba53ffc2a_z.jpg);
    background-size: cover;
    vertical-align: middle;
    background-position: center;
    color: #F0FEFF;
}
.section-title .headline
{
    font-size: 70px;
    word-spacing: 10px;
}
.section-wrapper
{
    background-color: rgba(45, 53, 56, 0.78);
    padding: 78px 0px;
    margin-top: 65px;
}


.section-header{
  font-size: 2em;
  border-bottom: 1px dotted #ccc;
  padding: 1em 0;
}

/* --------------------------------------  navs  ----------------------------------------------- */

.logo
{
    font-family: 'Dosis', sans-serif;
}
.nav.navbar-nav 
{
    /* padding: 0px 20px; */
}
.navbar-default
{
    /*background-color: #267D90;*/
    background-color: #46a1b4;
}
.navbar-default .navbar-header .logo
{
    font-size: 32px;
    color: #fff;
}
.navbar-nav li 
{
    /* border-right: 1px solid #54aec2; */
    padding: 7px 0px;
}
.navbar-default .navbar-nav li a 
{
    text-shadow: 1px 1px 0px #20606D;
    color: #fff;
}
.navbar-default .navbar-nav>.active
{
    /*background-color: rgba(5, 207, 252, 0.62);*/
    background-color: rgba(76, 214, 245, 0.62);
    border-top: 4px ridge rgb(5, 207, 252);
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus 
{
    color: #fff;
}
li:last-child 
{
    border-right: transparent;
}
.navbar-default .navbar-nav>li:hover, .navbar-default .navbar-nav>li:focus {
    background-color: #377F8F;
    color: white;
    border-bottom: 4px ridge rgb(5, 207, 252);
}
.navbar-fixed-top .navbar-collapse
{
    /* max-height: 415px; */
	width: auto;
}
.container-fluid 
{
    margin-left: 20px;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus
{
    color: #fff;
    background-color: transparent;
}
.navbar-default .navbar-nav>.active:hover 
{
    background-color: rgba(5, 207, 252, 0.62);
    border-bottom: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: auto;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: auto;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd; width: auto;}

.dropdown:hover .dropdown-content {display: block; width: auto;}















/* Targeting the second level menu */
.nav li ul {
    -moz-border-radius-bottomleft:3px;
    -moz-border-radius-bottomright:3px;
    -moz-border-radius-topright:3px;
    -moz-box-shadow:1px 1px 1px #333;
    -webkit-border-bottom-right-radius:3px;
    -webkit-box-shadow:1px 1px 1px #333;
    background:#507aa5;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    border-top-right-radius:3px;
    box-shadow:1px 1px 1px #333;
    color:#222;
    display:none;
    margin:0;
    padding:2px 0;
    position:absolute;
    width:140px
}

.nav li ul li {
    width:100%
}

.nav li ul li a {
    background:rgb(0, 119, 179);
    border:none;
    color:#fff;
    line-height:25px;
    margin:0;
    padding:0 0 0 8px
}

.nav li ul li a:hover {
    background:#466A90
}

.nav li ul li.strong-archive a {
    border-top:1px solid #466A90;
    font-weight:600
}

/* A class of current will be added via jQuery */
.nav li.current > a {
    -moz-border-radius:3px 3px 0 0;
    -moz-box-shadow:1px 1px 1px #333;
    -webkit-border-radius:3px 3px 0 0;
    -webkit-box-shadow:1px 1px 1px #333;
    background:#507aa5 url(images/arrow_hover.png) no-repeat right;
    border-radius:3px 3px 0 0;
    box-shadow:1px 1px 1px #333;
    color:#fff
}

/* CSS fallback */
.nav li:hover > ul.child {
    display:block

}

ul.a {
  list-style-type: circle;
}
/* -------------------------------------------Sidebar------------------------------------------- */
.blog-content aside .widget, .faq-content aside .widget
{
    margin-bottom: 40px;
}
.widget h4, 
{
    background: url("../img/title-bg.png") repeat-x scroll 0 4px rgba(0, 0, 0, 0);
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 0;
}
.widget.widget_iw_last_posts h5 
{
    margin-bottom: 5px;
    font-weight: 400;
}
.widget h4 span, .special-service h2 span
{
    padding-right: 10px;
}
.widget h5 
{
    text-transform: none;
    font-size: 14px;
    margin-top: 10px;
}
.widget ul 
{
    padding-left: 0;
    list-style: none;
}
.widget ul li 
{
    border-bottom: 1px solid #f3f3f3;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    list-style: none;
    display: block;
    padding: 10px 20px 10px 0;
    position: relative;
}
.widget ul li:hover 
{
    background: #f8f8f8;
    padding-left: 10px;
}
.widget ul li:hover a
{
    text-decoration: none;
}
.widget ul li:before 
{
    color: #646464;
    content: "\f0da";
    font-family: FontAwesome;
    position: absolute;
    right: 5px;
    top: 12px;
    font-size: 11px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.widget.widget_tag_cloud .tagcloud a 
{
    background-color: #eaeaea;
    border: 1px solid #f3f3f3;
    padding: 5px 10px;
    margin: 0 3px 8px 0;
    font-size: 14px !important;
    display: inline-block;
}

/* ------------------------------------   appointment  ----------------------------------------- */

.appointment
{
    background-color: #e6e6e6;
}
.appointment .header 
{
    background-color: #46a1b4;
    min-height: 99px;
    height: auto !important;
    padding: 10px 23px 0px;
    margin: 0px 0px 30px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(0,0,0,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,0));
    background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,0));
    background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,0));
}
.appointment .header h2, .appointment .header .number 
{
    text-shadow: 1px 1px 0px #20606D;
    color: #ffffff;
    font-size: 24px;
    line-height: 40px;
    font-weight: normal;
}  
.appointment .header a i
{
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 2px solid #fff;
    background: #6DBEC2;
    color: white;
    padding-top: 3px;
    padding-left: 6px;
}
.appointment .header .or 
{
    display: block;
    width: 100%;
    height: 35px;
    background: url(../img/or-bg.png) center center no-repeat; 
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 35px;
    position: relative;
    top: 17px;
}
.captcha-container 
{
    margin: 0 0 20px;
}
.captcha-container img 
{
    vertical-align: top;
    margin: 10px 0px;
}
.appointment .input-group
{
    padding: 10px 0px;
}

/* ========================================= 1. Home============================================= */


/* -------------------------------------- 1.1 heading-slider---------------------------------------- */
.slider-inner 
{
    /*background-color: rgba(21, 7, 7, 0.55);*/
    background-color: rgba(51, 71, 90, 0.32);
    width: 100%;
    color: white;
    height: 700px;
}
.slider-inner-text
{
    margin: 262px 0px;
    width: 50%
}
.slider-1
{
    background: url(../img/HomePageImg/front1.jpg);
    width: 100%;
    height: 100%;
    background-size: cover;
    vertical-align: middle;
    background-position-x: 75%;
    background-position-y: 5%;
    filter: contrast(120%) brightness(140%);
}
.slider-2
{
    background: url(../img/HomePageImg/front2.jpg);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position-x: 65%;
    background-position-y: 5%;
    filter: contrast(120%) brightness(140%);
}
.slider-3
{
    background: url(../img/HomePageImg/front3.jpg);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position-x: 75%;
    background-position-y: 5%;
    filter: contrast(120%) brightness(140%);
}
.slider-inner h1 
{
    margin-bottom: 35px;
    font-size: 70px;
}
.slider-inner-text p
{
    font-size: 23px;
}
/*---------------------------------------------- 1.2.a starting-text-section-a ----------------------------------*/

section.starting-text-a
{
    background-color: rgba(230, 247, 255, 0.82);
    /*background: -webkit-linear-gradient(left top, #085A6C , #3E8B90);
    background: -o-linear-gradient(bottom right, #085A6C , #3E8B90);
    background: -moz-linear-gradient(bottom right, #085A6C , #3E8B90);
    background: linear-gradient(to bottom right, #085A6C , #3E8B90); */
    margin-top: -37px;
}
.welcome 
{
    padding: 48px 68px;
    text-align: center;
}
.welcome-title 
{
    font-size: 50px;
    padding-bottom: 15px;
    /*color: #B0FFF6;*/
    color: #FFFFFF;
    text-shadow: 1px 1px 2px #083944;
}
.welcome-txt 
{
    font-size: 18px;
    color: #fff;
    line-height: 35px;
    margin-bottom: 26px;
    padding-top: 26px;
    letter-spacing: 1px;
}
.welcome-btn
{
    background-color: #fff;
    margin-top: 20px;
    color: #46a1b4;
    border-radius: 0px;
    font-size: 16px;
    transition: all 0.3s ease-in;
    padding: 13px 20px;
    border: 2px solid #fff;
}
.welcome-btn:hover 
{
    color: white;
    background-color: #46a1b4;
}
/*---------------------------------------------- 1.2 starting-text ----------------------------------*/


section.starting-text 
{
    background-color: rgba(70, 161, 180, 0.82);
    /*background: -webkit-linear-gradient(left top, #085A6C , #3E8B90);
    background: -o-linear-gradient(bottom right, #085A6C , #3E8B90);
    background: -moz-linear-gradient(bottom right, #085A6C , #3E8B90);
    background: linear-gradient(to bottom right, #085A6C , #3E8B90); */
    margin-top: -37px;
}
.welcome 
{
    padding: 48px 68px;
    text-align: center;
}
.welcome-title 
{
    font-size: 50px;
    padding-bottom: 15px;
    /*color: #B0FFF6;*/
    color: #FFFFFF;
    text-shadow: 1px 1px 2px #083944;
}
.welcome-txt 
{
    font-size: 18px;
    color: #fff;
    line-height: 35px;
    margin-bottom: 26px;
    padding-top: 26px;
    letter-spacing: 1px;
}
.welcome-btn
{
    background-color: #fff;
    margin-top: 20px;
    color: #46a1b4;
    border-radius: 0px;
    font-size: 16px;
    transition: all 0.3s ease-in;
    padding: 13px 20px;
    border: 2px solid #fff;
}
.welcome-btn:hover 
{
    color: white;
    background-color: #46a1b4;
}
/* ----------------------------------- 1.3 reason for choise------------------------------------ */

.service-heading 
{
    padding: 20px 0px;
    color: darkcyan;
    font-size: 29px;
}

.service-img 
{
    opacity: 0.9;
}
/* .fa-facebook , .fa-twitter ,.fa-google-plus , .fa-instagram , .fa-pinterest , .fa-skype{

    margin-top: 7px;
} */
.form-control {
    height: 38px !important;
}
.hservice {
    /*background: rgb(242, 247, 255);*/
    background-color: rgba(185, 208, 240, 0.16);
    border: 1px solid #CED8E7;
    margin: 30px 0px;
    padding-bottom: 30px;
    transition: all 0.3s ease-in;
}
.hservice:hover 
{
    box-shadow: 0px 2px 3px 2px #CED8E7;
}

.hservice:hover .service-img 
{
    opacity: 1;
}
.service-description p 
{
    padding: 0px 10px;
    line-height: 25px;
}
/* ------------------------------------- 1.4 testimonial-------------------------------------------- */
#testimonial
{
    background: url(../img/WorldMapImg.jpg);
    width: 100%;
    background-size: cover;
    margin-top: 20px;
    color: rgb(134, 132, 132);
}
.testimonial-wrapper
{
    background-color: rgba(153, 204, 255, 0.87);
    padding: 40px 0px;
}
.client-content h1 
{
    font-size: 51px;
}
.sub-headline p 
{
    font-size: 23px;
}
.client-comment 
{
    font-size: 18px;
    padding: 30px 0px;
    line-height: 30px;
    color: black;
}
#client-speech img 
{
    margin-top: 40px;
    margin-bottom: 20px;
    border: 10px solid rgb(131, 129, 137);
}
/* ========================================= 2. Service=========================================== */
.service-title
{
    background: url(../img/ServicesImg/services1.JPG);
    background-size: cover;
    vertical-align: middle;
    background-position: center;
    color: #F0FEFF;
}
.service-title .headline 
{
    font-size: 70px;
    word-spacing: 10px;
}
.service-wrapper
{
    /*background-color: rgba(45, 53, 56, 0.28);*/
    background-color: rgba(70, 161, 180, 0.62);
    padding: 78px 0px;
    margin-top: 65px;
}
.service
{
    padding: 40px 20px;
    transition: all 0.5s ease 0s;
}
.featured-service-content 
{
    background-color: rgba(230, 247, 255, 0.82);
    margin: 40px 0px;
}
.service .service-icon i
{
    width: 150px;
    height: 150px;
    border-radius: 75px;
    border: 2px solid #6DBEC2;
    background: #fff;
    color: #6DBEC2;
    padding-top: 38px;
    transition: all 0.7s ease 0s;
}
.about-service h3 
{
    padding: 12px 0px;
    color: darkcyan;
}

.about-service p 
{
    padding: 0px 10px;
}
.service:hover .service-icon i
{
    color: white;
    background-color: #6DBEC2;
}
.service:hover .about-service h3
{
    color: #02A2B6;
}
.special-service
{
    margin-top: 50px;
}
.service-tab 
{
    margin-top: 50px;
}

.service-item 
{
    padding: 30px 0px;
}
.service-item img 
{
    margin-bottom: 30px;
}
.service-item h3 
{
    color: darkcyan;
    margin-top: 0px;
}
.service-item p 
{
    line-height: 25px;
    padding: 10px 0px;
}
.special-service h2
{
    margin-bottom: 10px;
    margin-top: 0;
}

.sub-headline 
{
    padding: 15px 0px 40px 0px;
    font-size: 24px;
}
.headline 
{
    padding-top: 45px;
    font-size: 45px;
}
.service-rm-btn
{
    background-color: transparent;
    color: #46a1b4;
    border-radius: 0px;
    font-size: 15px;
    transition: all 0.3s ease-in;
    padding: 5px 12px;
    margin: 4px 0px 0px 5px;
    border-color: #46a1b4;
}
.service-rm-btn:hover
{
    /* background-color: #46a1b4; */
    background-color: rgb(0, 139, 168);
    color: #fff;
    border-color: #3A90CD;
}


/* ========================================= 3. Faculty============================================ */

/* ------------------------------------------  3.1 Faculty-list --------------------------------- */
.team-button {
    margin-top: -60px;
}
#starting
{
    background: url(../img/FacultyImg/faculty1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
@media (min-width:1100px){

    .starting-wrapper {
    height: 500px;
    }
}
.starting-wrapper
{
    background-color: rgba(0,0,0,0.17);
    padding: 208px 0px;
    color: #fff;
}
.main-title {
    background-color: rgb(0, 184, 230);
    display: inline-block;
    padding: 23px 70px;
    float: right;
}
.sub-title 
{
    padding: 30px;
    float: right;
    background-color: rgb(0, 184, 230);
}
.doctor-list
{
    background-color: rgba(230, 247, 255, 0.82);
    padding-top: 100px;
}
/* Card */
.doctor-meta{
  position: relative;
  margin: 120px 0 70px;
  padding: 140px 35px 36px;   /* extra top so the circle doesn't collide */
  border: 1px solid rgba(59,77,116,.29);
  background-color: rgba(92,145,216,.27);
  overflow: visible;          /* let the circle sit above the card */
}

/* Circle avatar (with neat double ring) */
.doctor-meta .doctor-img{
  --size: 200px;              /* change once to resize everywhere */
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: calc(-0.5 * var(--size));   /* half outside the card */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 3;

  /* clean ring look */
  background: #fff;                 /* prevents the “gap” over the card edge */
  border: 4px solid #fff;           /* inner white ring */
  outline: 2px solid #c6c6c6;       /* outer gray ring */
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* Make the photo fill perfectly */
.doctor-meta .doctor-img {
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.18),     /* soft drop shadow */
    0 0 20px rgba(140, 100, 255, 0.5);  /* faint Wonder World purple glow */
}


.doctor-info .doctor-name
{
    margin-top: 10px;
    letter-spacing: 1px;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}
.doctor-info .position
{
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    letter-spacing: 1px;
}
.doctor-info .doctor-des
{
    margin-top: 20px;
    margin-bottom: 10px;
    display: block;
}
.doctor-info .doctor-social .online-contact a
{
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: cadetblue;
    float: left;
    color: white;
    padding-top: 6px;
    padding-left: 2px;
}

/* -------------------------------------- 3.2 Parents Area --------------------------------------------- */
#job
{
    background: url(../img/WorldMapImg.jpg) 50% 0 no-repeat fixed;
    width: 100%;
    background-size: cover;
    margin-top: 20px;
    color: black;
}
.job-wrapper
{
    background-color: rgba(204, 238, 255, 0.87);
    padding: 100px 0;
}
#job h2 
{
    padding-top: 11px;
}
#job h4 
{
    line-height: 30px;
    padding: 20px 0px 10px 0px;
}
.block-image 
{
    position: relative;
    z-index: 99;
    overflow: hidden;
}
#job .form-control {
    background-color: rgba(0, 0, 0, 0.45);
    border-color: #fff;
    color: #46a1b4;
    height: 38px;
}
#job .input-group-addon
{
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}
#job .input-group
{
    padding: 20px 0px;
}
#job .send 
{
    margin-top: 30px;
    background-color: transparent;
    border-color: #fff;
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

ul li a:hover{
	color: #fff;
	background: #939393;
}
ul li ul.dropdown{
	min-width: 100%; /* Set width of the dropdown */
	background: rgb(64, 128, 191);
	display: none;
	position: absolute;
	z-index: 999;
	left: 0;
}
ul li:hover ul.dropdown{
	display: block;	/* Display the dropdown */
}
ul li ul.dropdown li{
	display: block;
}
/* ========================================= 4. FAQs============================================= */
.faq-title
{
    background: url(../img/6177817673_5ba53ffc2a_z.jpg);
    background-size: cover;
    vertical-align: middle;
    background-position: center;
    color: #F0FEFF;
}
.faq-title .headline
{
    font-size: 70px;
    word-spacing: 10px;
}
.faq-wrapper
{
    background-color: rgba(45, 53, 56, 0.62);
    padding: 78px 0px;
    margin-top: 65px;
}


.faq-header{
    font-size: 2em;
    border-bottom: 1px dotted #ccc;
    padding: 1em 0;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
}


.faq-content
{
    margin-top: 80px;
}


.faq-c {
  border-bottom: 1px dotted #ccc;
  padding: 1em 0;
}

.faq-t {
  line-height: 1.5em;
  color: #aaa; 
  font-family: sans-serif; 
  float:left; 
  font-weight: 700; 
  padding-right: 0.62em; 
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

.faq-o {
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  -ms-transform: rotate(-45deg);
  -ms-transform-origin: 50% 50%;
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin: 50% 50%;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
  margin-top: -5px;
}

.faq-q {
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    font-size: 1.25em;
    background: rgba(249, 249, 249, 0.5);
    font-weight: 100;
    padding: 16px;
    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}

.faq-q:hover {
    box-shadow: 0 1px 5px 0 #626262;
    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}

.faq-a {
  clear: both;
  color: #666;
  display: none;
  padding: 1.5em;
}
/* ========================================== 5. Blog============================================= */
.blog-content
{
    margin-top: 80px;
}
.blog-title
{
    background: url(../img/blue-abstract-background.jpg);
    background-size: cover;
    vertical-align: middle;
    color: #F0FEFF;
    background-position: center;
}
.blog-title .headline
{
    font-size: 70px;
    word-spacing: 10px;
}
.blog-wrapper
{
    background-color: rgba(45, 53, 56, 0.62);
    padding: 78px 0px;
    margin-top: 65px;
}
.archive article 
{
    margin-bottom: 62px;
}
.archive h4 
{
    font-size: 25px;
    word-spacing: 3px;
}
article h4 a
{
    color: cadetblue;
}
.img-padder 
{
    background-color: #f8f8f8;
    border: 1px solid #eaeaea;
    padding: 5px;
    margin-bottom: 20px;
    margin-top: 12px;
}
main .info 
{
    border-bottom: 1px dotted #eaeaea;
    border-top: 1px dotted #eaeaea;
    padding: 10px 0;
    margin: 20px 0;
    color: rgba(100, 100, 100, 0.8);
}
.list-inline 
{
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
    text-align: center;
}
.blog-content main .info.list-inline li:not(:last-child) 
{
    border-right: 1px solid #eaeaea;
}

.blog-content main .info.list-inline li:first-child {
    padding-left: 0px;
}

.blog-content main .info li 
{
    display: table-cell;
    padding: 0 15px 0 15px;
}

main p {
    line-height: 30px;
}
.rm-btn
{
    background-color: transparent;
    margin-top: 20px;
    color: #46a1b4;
    border-radius: 0px;
    font-size: 16px;
    transition: all 0.3s ease-in;
    padding: 13px 20px;
    border-color: #46a1b4;
}
.rm-btn:hover
{
    background-color: #46a1b4;
    color: #fff;
    border-color: #3A90CD;
}
.blog-rm-btn 
{
    /* background-color: transparent; */
    background-color: #46a1b4;
    border-color: #A7D1D8;
    /* color: #46a1b4; */
    color: #fff;
    border-radius: 0px;
    transition: all 0.3s ease-in;
}

.blog-rm-btn:hover 
{
    /* background-color: #085A6C; */
    background-color: darkcyan;
    color: #fff;
    border-color: #3A90CD;
}

/* ========================================== 6. Gallery========================================== */
.gallery-title
{
    background: url(../img/1_235555_1.jpg);
    background-size: cover;
    vertical-align: middle;
    color: #F0FEFF;
    background-position: center;
}
.gallery-title .headline
{
    font-size: 70px;
    word-spacing: 10px;
}
.gallery-content
{
    margin-top: 20px;
    background-color: rgba(204, 242, 255, 0.24);
}
.gallery-wrapper
{
    background-color: rgba(25, 31, 34, 0.24);
    padding: 78px 0px;
    margin-top: 65px;
}
.gallery-btn
{
    background-color: transparent;
    margin-top: 20px;
    color: #46a1b4;
    border-radius: 0px;
    font-size: 16px;
    transition: all 0.3s ease-in;
    padding: 13px 20px;
    border-color: #46a1b4;
    margin: 0px 5px;
}
.gallery-btn:hover
{
    background-color: #46a1b4;
    color: #fff;
    border-color: #3A90CD;
}
.isotope
{
    margin-top: 100px; 
}
.element-item:hover img, .element-item:hover .item-title, .element-item:hover .item-tags
{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.element-item:hover img, .element-item:hover .item-desc, .element-item:hover .item-title, .element-item:hover .item-tags
{
    opacity: 1;
}
.element-item img 
{
    position: relative;
    margin-bottom: 10px;
    display: block;
    min-height: 100%;
    opacity: 0.8;
    width: calc(100% + 50px);
    opacity: 0.7;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    -moz-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0, 0);
    -moz-transform: translate3d(-40px,0, 0);
    transform: translate3d(-40px,0,0);
    border: 2px solid #d3d3d3 !important;
}
.element-item 
{
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    /*margin: -0.135em;*/
    text-align: center;
    cursor: pointer;
}
.item-desc {
    top: auto;
    bottom: 10px;
    height: 48%;
    text-align: left;
    position: absolute;
    color: #000;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 0;
    background-color: rgba(96, 130, 163, 0.86);
    width: 72%;
    padding-left: 20px;
}
.item-tags, .item-title
{
    color: rgba(255, 255, 255, 0.91);
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}
.item-tags
{
    font-size: 10px;
}
/* ========================================= 7. Contact========================================== */
.contact-title
{
    background: url(../img/WorldMapImg.jpg);
    background-size: cover;
    vertical-align: middle;
    color: #F0FEFF;
    background-position: center;
}
.contact-title .headline
{
    font-size: 70px;
    word-spacing: 10px;
}
.contact-wrapper
{
    background-color: rgba(0, 134, 179, 0.71);
    padding: 78px 0px;
    margin-top: 65px;
}
.contact-content
{
    margin-top: 20px;
    background-color: rgba(204, 242, 255, 0.71);
}
#map-canvas 
{
    width: 100%;
    height: 460px;
}
.quick-contact i 
{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #6DBEC2;
    color: white;
    padding-top: 12px;
    padding-left: 14px;
    font-size: 25px;
}
.quick-contact span 
{
    padding-left: 10px;
    font-size: 18px;
}
.quick-contact span 
{
    color: rgb(73, 77, 123);
}
.quick-contact {
    font-size: 17px;
    margin-bottom: 40px;
}
.msg-form
{
    padding: 20px 16px;
}
.msg-form .input-group
{
    display: inline-table;
    padding: 20px 0px;
}

/* ============================================Footer=========================================== */

#footer
{
    /*background-color: #085A6C;*/
    background-color: #46A1B4;
    /*background: -webkit-linear-gradient(left top, #085A6C , #3E8B90);
    background: -o-linear-gradient(bottom right, #085A6C , #3E8B90);
    background: -moz-linear-gradient(bottom right, #085A6C , #3E8B90);
    background: linear-gradient(to bottom right, #085A6C , #3E8B90); */
    padding: 25px 0px;
}
.copy-right-text
{
    color: #fff;
    font-size: 13px;
    padding-top: 25px;
}

.copy-right-text a {
    color: #AFEEEE;
    font-size: 15px;
    font-weight: 500;
}

.copy-right-text a:hover {
    color: #064B6D;
}


/* ----------------------------------- social media -------------------------------------------- */

.contact 
{
    padding-top: 10px;
    padding-left: 0px;
}
li.socials-icons 
{
    padding-left: 20px;
}
.socials-icons a
{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    /* background: #6DBEC2; */
    background-color: #49C1DC;
    float: left;
    color: white;
    padding-top: 3px;
    font-size: 20px;
}
.facebook:hover
{
    background-color: #46629E;
    box-shadow: 0 0 0 2px #46629E;
    color: white;
}
.twitter:hover
{
    background-color: #0EAACE;
    box-shadow: 0 0 0 2px #0EAACE;
    color: white;
}
.google-plus:hover
{
    background-color: #AF0000;
    box-shadow: 0 0 0 2px #AF0000;
    color: white;
}
.instagram:hover
{
    background-color: #3f729b;
    box-shadow: 0 0 0 2px #3f729b;
    color: white;
}
.pinterest:hover
{
    background-color: #CB2027;
    box-shadow: 0 0 0 2px #CB2027;
    color: white;
}
.skype:hover
{
    background-color: #01AEF2;
    box-shadow: 0 0 0 2px #01AEF2;
    color: white;
}

/* =========================================Media Query========================================= */

@media (min-width: 1200px){
    .navbar-collapse.collapse 
    {
        display: block!important;
        height: auto!important;
        /* padding: 10px 0px; */
        overflow: visible!important;
    }
}
    
@media (min-width: 1200px){
    .navbar-collapse 
    {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

@media (max-width: 991px){
    .slider-inner-text {
        margin: 162px 0px;
    }
}

@media (max-width: 767px){
    .slider-inner-text {
        margin: 162px 58px;
        width: 62%;
    }
}

@media (max-width: 505px){
    section.content main .info li:not(:last-child) 
    {
        margin: 0 27px 10px 0;
    }   
    section.content main .info li 
    {
        border: 0 !important;
        display: inline;
        margin: 0;
        padding: 0px;
    }
    .slider-inner h1{
        font-size: 50px;
    }
    .slider-inner-text {
        margin: 162px 13px;
    }
    .slider-inner-text p
    {
        font-size: 19px;
    }
    .welcome {
        padding: 48px 20px;
    }
}
@media(max-width: 319px) {
    .heading-slider {
        display: none;
    }
}



/* ====== NAVBAR HOTFIX (scoped to header only) ====== */

/* Scope EVERYTHING to #site-header to prevent bleed */
#site-header .navbar.navbar-default {
  background: #197c92;
  background-image: linear-gradient(0deg, #197c92 0%, #239db5 100%);
  border: 0;
  min-height: 68px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  position: relative;
  z-index: 1000;
}

#site-header .container-fluid { padding-left: 18px; padding-right: 18px; }

/* Brand area */
#site-header .navbar-brand.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 600;
  letter-spacing: .5px;
  padding: 14px 0;
  margin-right: 18px;
  text-decoration: none;
}

#site-header .navbar-brand.logo img {
  height: 42px !important;   /* visible but not huge */
  width: auto;
  display: block;
  /* keep it clean: no filters that could affect other images */
  filter: none !important;
}

#site-header .navbar-brand.logo span {
  font-size: 18px;
  color: #fff;
}

/* Menu links */
#site-header .navbar-nav > li > a {
  color: #fff !important;
  padding: 22px 16px;
  font-weight: 500;
  letter-spacing: .2px;
  text-shadow: none !important;
  background: transparent;
}

#site-header .navbar-nav > li > a:hover,
#site-header .navbar-nav > li > a:focus {
  background: rgba(255,255,255,.10);
}

#site-header .navbar-nav > .active > a,
#site-header .navbar-nav > .active > a:hover,
#site-header .navbar-nav > .active > a:focus {
  background: rgba(255,255,255,.18);
}

/* Mobile toggle contrast */
#site-header .navbar-toggle { border: 0; margin-top: 16px; }
#site-header .navbar-toggle .icon-bar { background-color: #fff; }

/* Dropdowns */
#site-header ul.navbar-nav li ul.dropdown {
  background: #fff;
  border-radius: 10px;
  padding: 8px 0;
  min-width: 220px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);
}
#site-header ul.navbar-nav li ul.dropdown li a {
  color: #1b2a36 !important;
  padding: 10px 14px;
}
#site-header ul.navbar-nav li ul.dropdown li a:hover { background: #f0fbff; }

/* ====== RESET any non-header .logo that may have been affected ====== */
body :not(#site-header) .logo { 
  display: initial; 
  color: inherit; 
  font: inherit; 
  letter-spacing: normal; 
}

body :not(#site-header) .logo img {
  height: auto !important;
  max-width: 100% !important;
  width: auto !important;
  filter: none !important;
}

/* === FIX: restore tabs visibility on desktop, keep mobile hamburger === */
#site-header .navbar { overflow: visible; }



/* Desktop (≥992px): uncollapse the nav and align it */
@media (min-width: 992px) {
  #site-header .navbar-header { float: left; }
  #site-header .navbar-collapse.collapse {
    display: block !important;     /* show tabs */
    height: auto !important;
    padding: 0;
  }
  #site-header .navbar-toggle { display: none; }  /* no hamburger on desktop */
  #site-header .navbar-nav { 
    float: right;                   /* move tabs to the right */
  }
}

/* Mobile (<992px): keep hamburger and make the dropdown readable */
@media (max-width: 991px) {
  #site-header .navbar-collapse {
    background: #197c92;           /* same bar color for contrast */
    border-top: 1px solid rgba(255,255,255,.2);
  }
  #site-header .navbar-nav > li > a {
    padding: 12px 16px;            /* comfy touch targets */
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
}




/* ===== Core responsive helpers ===== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

img, video, canvas { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; }

/* Typographic scaling: comfortable on small screens, readable on large */
html { font-size: 100%; } /* 16px base */
@media (max-width: 1200px) { html { font-size: 15px; } }
@media (max-width: 992px)  { html { font-size: 15px; } }
@media (max-width: 768px)  { html { font-size: 14px; } }
@media (max-width: 480px)  { html { font-size: 14px; } }

/* Layout container that adapts */
.container,
.container-fluid { width: 100%; padding-left: 16px; padding-right: 16px; }
@media (min-width: 576px) { .container { max-width: 540px;  margin: 0 auto; } }
@media (min-width: 768px) { .container { max-width: 720px;  } }
@media (min-width: 992px) { .container { max-width: 960px;  } }
@media (min-width: 1200px){ .container { max-width: 1140px; } }
@media (min-width: 1400px){ .container { max-width: 1320px; } }

/* Header/Nav: keep tabs readable, collapse on mobile */
#site-header .navbar { min-height: 60px; }
#site-header .navbar-brand.logo img { height: 40px; width: auto; }
#site-header .navbar-nav > li > a { padding: 18px 14px; }

/* Show full menu on desktop; collapse on mobile */
@media (min-width: 992px) {
  #site-header .navbar-header { float: left; }
  #site-header .navbar-toggle { display: none; }
  #site-header .navbar-collapse.collapse { display: block !important; height: auto !important; }
  #site-header .navbar-nav { float: right; }
}
@media (max-width: 991px) {
  #site-header .navbar-collapse { background:#197c92; border-top:1px solid rgba(255,255,255,.2); }
  #site-header .navbar-nav > li > a { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
}

/* Hero/banner image: crop nicely across screens */
.hero,
.banner,
.page-hero {
  position: relative;
  overflow: hidden;
}
.hero img,
.banner img,
.page-hero img {
  width: 100%;
  height: clamp(240px, 45vh, 520px);   /* responsive height */
  object-fit: cover;
  object-position: center;
}

/* Cards/people grid: from 3→2→1 columns */
.grid-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 992px) { .grid-people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-people { grid-template-columns: 1fr; } }

/* Your profile card spacing: reduce overlap on small screens */
.doctor-meta { padding: 120px 24px 28px; }
.doctor-meta .doctor-img { --size: 200px; }
@media (max-width: 600px){
  .doctor-meta { padding-top: 100px; }
  .doctor-meta .doctor-img { --size: 160px; top: calc(-0.5 * var(--size) + 8px); }
}

/* Tables: horizontal scroll on small screens */
.responsive-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.responsive-table > table { min-width: 640px; }

/* Buttons/links: bigger touch targets on phones */
@media (max-width: 600px){
  a.btn, button, .btn { padding: 12px 16px; font-size: 1rem; }
}

/* Footer stacks vertically on mobile */
.site-footer .footer-columns {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 768px){
  .site-footer .footer-columns { grid-template-columns: 1fr; }
}



/* Remove white gap under the header */
#site-header {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Reduce any white gap above the hero/banner */
.hero,
.banner,
.page-hero,
section:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

/* Optional: pull hero closer if there's still a small gap */
.hero img,
.banner img,
.page-hero img {
  display: block;
  margin-top: -4px; /* fine-tune: try -2px to -6px */
}



.navbar.navbar-default {
  border-bottom: none !important;
}



body > section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


#site-header .navbar {
  border-bottom: 2px solid #239db5;
}


/* Default: fill hero nicely on normal screens */
.hero,
.banner,
.page-hero {
  position: relative;
  overflow: hidden;
  background: #eaf7fb;              /* subtle backdrop if letterboxed */
}

.hero img,
.banner img,
.page-hero img {
  width: 100%;
  height: clamp(360px, 45vh, 720px); /* responsive height */
  object-fit: cover;                 /* small/medium screens: crop is fine */
  object-position: center 40%;       /* tweak framing */
  display: block;
}

/* Ultra-wide monitors: show the whole image (no crop) */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .hero img,
  .banner img,
  .page-hero img {
    height: auto;                    /* unlock height */
    max-height: calc(100vh - 120px); /* keep under viewport */
    object-fit: contain;             /* show the entire photo */
  }
  .hero,
  .banner,
  .page-hero {
    display: grid;                   /* center the image if letterboxed */
    place-items: center;
    background-color: #dbeff6;       /* visible behind top/bottom bars */
  }
}

/* === Hero section with text below image === */
.slider-inner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Keep hero image full width and responsive */
.slider-inner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Move hero text (for all slides) to the left */
.slider-inner-text {
  position: absolute;
  top: 40%;               /* vertical placement */
  left: 10%;              /* horizontal placement — adjust to move more left or right */
  transform: translateY(-50%);
  text-align: left;       /* left-align text */
  width: 40%;             /* optional: prevent text from being too wide */
  color: #007db8;            /* adjust if needed for visibility */
  z-index: 10;
}

/* Ensure child text elements also align properly */
.slider-inner-text h1,
.slider-inner-text p {
  text-align: left;
}

/* White text for dark mode */
@media (prefers-color-scheme: dark) {
  .slider-inner-text {
    --hero-text-color: #ffffff;
  }
}

/* Manual overrides */
.slider-dark .slider-inner-text { --hero-text-color: #ffffff; }
.slider-light .slider-inner-text { --hero-text-color: #197c92; }


.hservice .service-description {
  min-height: 300px; /* подбери по вкусу */
}

/* --- Base link polish --- */
#main-nav .nav > li > a { 
  padding: 14px 18px; 
  font-weight: 600;
  letter-spacing: .2px;
}

/* Optional: highlight the top-level “Programs” link */
.nav-link-cta {
  position: relative;
}
.nav-link-cta .caret { margin-left: 6px; }

/* --- Dropdown container --- */
.wwa-menu.dropdown-menu {
  min-width: 280px;                 /* wider, easier to tap */
  padding: 10px 8px 12px;
  border: 0;
  border-radius: 12px;              /* soft corners */
  box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  background: #ffffff;
  margin-top: 12px;                 /* breathing room from navbar */
}

/* Top label inside menu */
.wwa-menu-header {
  padding: 10px 14px 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #6b7a8c;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 6px;
}

/* Menu items as “pills” */
.wwa-item {
  display: block;
  margin: 6px 8px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #0b3b47;                   /* readable on white */
  background: #f4f8fb;              /* soft blue tint */
  transition: background .2s ease, transform .06s ease;
  text-decoration: none;
  font-weight: 600;
}
.wwa-item:hover,
.wwa-item:focus {
  background: #e0f0ff;              /* stronger hover */
  outline: none;
  transform: translateY(-1px);
}
.wwa-item:active { transform: translateY(0); }

/* Improve touch targets on mobile */
@media (max-width: 991px) {
  .wwa-menu.dropdown-menu {
    width: calc(100vw - 40px);
    left: 20px !important;
    right: 20px !important;
  }
  .wwa-item { padding: 12px 14px; font-size: 16px; }
}

/* Optional: keep dropdown open on hover (desktop only) */
@media (min-width: 992px) {
  #main-nav .dropdown:hover > .dropdown-menu { display: block; }
  #main-nav .dropdown:hover > a { color: #fff; }
}

/* High-contrast focus ring for accessibility */
.wwa-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(30,144,255,.35);
}

/* Make the whole dropdown feel anchored to the trigger */
#main-nav .dropdown { position: static; }
#main-nav .dropdown .dropdown-menu { left: auto; }

/* Position dropdown exactly under the Programs tab */
#main-nav .dropdown-menu.wwa-menu {
  top: 100%;                /* places menu right under the parent link */
  left: 0;                  /* align left edge with the tab */
  transform: translateY(4px); /* small visual offset */
  margin-top: 0;
  border-top-left-radius: 0;  /* optional: blend into navbar */
  border-top-right-radius: 0;
}

/* Keep the dropdown attached even on hover (desktop) */
@media (min-width: 992px) {
  #main-nav .dropdown:hover > .dropdown-menu {
    display: block;
    top: 100%;
    left: 0;
  }
}

/* Optional visual enhancement: shadow and subtle transition */
.wwa-menu.dropdown-menu {
  transition: all 0.15s ease-in-out;
}

/* Fix dropdown position under Programs tab */
#main-nav .dropdown {
  position: relative; /* make this the reference point */
}

#main-nav .dropdown-menu.wwa-menu {
  position: absolute; /* attach to Programs tab */
  top: 100%;          /* directly below the tab */
  left: 50%;          /* center horizontally */
  transform: translateX(-50%) translateY(5px); /* perfectly centered + small gap */
  margin-top: 0;
  z-index: 9999;       /* make sure it stays above everything */
  min-width: 260px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
}

/* Keep hover behavior for desktop */
@media (min-width: 992px) {
  #main-nav .dropdown:hover > .dropdown-menu {
    display: block;
  }
}


/* --- Dropdown animation setup --- */
#main-nav .dropdown-menu.wwa-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px); /* starts slightly lower */
  transition: all 0.25s ease-in-out;
}

/* When menu becomes visible (hover or open) */
#main-nav .dropdown.open .dropdown-menu.wwa-menu,
#main-nav .dropdown:hover .dropdown-menu.wwa-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0); /* slides up slightly */
}

/* Optional: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  #main-nav .dropdown-menu.wwa-menu {
    transition: none;
  }
}

transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);

/* Image card */
.wwa-photo {
  margin: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(15, 38, 74, 0.12), 0 2px 8px rgba(15, 38, 74, 0.06);
  overflow: hidden;
}
.wwa-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .5s ease;
}
.wwa-photo:hover img { transform: scale(1.02); }


/* ===== MOBILE MENU FIXES (Updated with White Text) ===== */
@media (max-width: 767px) {

  /* Dropdown menu style */
  #main-nav .dropdown-menu.wwa-menu {
    position: static !important;
    float: none;
    display: none;
    width: auto;
    max-width: none;
    margin: 10px 12px 16px;
    padding: 10px 8px 14px;
    background: #006c8c; /* darker teal for contrast */
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: 9999;
  }

  /* Show dropdown when active */
  #main-nav .dropdown.open > .dropdown-menu.wwa-menu,
  #main-nav .dropdown.show > .dropdown-menu.wwa-menu {
    display: block;
  }

  /* Header inside the dropdown */
  .wwa-menu-header {
    padding: 10px 14px 8px;
    margin: 0 0 6px;
    border-bottom: 1px solid rgba(255,255,255,.25);
    color: #e3f7ff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .7px;
  }

  /* Menu item style */
  .wwa-item {
    display: block;
    margin: 8px 10px;
    padding: 14px 16px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;  /* white text */
    background: #009ec1; /* slightly lighter blue */
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
  }

  /* Hover and active state */
  .wwa-item:hover,
  .wwa-item:focus,
  .wwa-item:active {
    background: #00b8d4;
    color: #ffffff;
  }

  /* Smooth slide animation */
  .navbar-collapse.show .wwa-menu {
    animation: wwaSlideIn .25s ease both;
  }
  @keyframes wwaSlideIn {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}


/* FORCE WHITE TEXT in the mobile Programs dropdown */
@media (max-width: 767px) {
  /* Card background for contrast (optional) */
  #main-nav .dropdown-menu.wwa-menu {
    background: #006c8c !important;
  }

  /* Make ALL links in this menu white */
  #main-nav .dropdown-menu.wwa-menu a,
  #main-nav .dropdown-menu.wwa-menu .wwa-item,
  #main-nav .dropdown.open .dropdown-menu.wwa-menu > li > a,
  #main-nav .dropdown.show .dropdown-menu.wwa-menu > li > a {
    color: #ffffff !important;
  }

  /* If you wrapped text in <span>, force that too */
  #main-nav .dropdown-menu.wwa-menu .wwa-item span {
    color: #ffffff !important;
  }

  /* Hover/active states stay white */
  #main-nav .dropdown-menu.wwa-menu a:hover,
  #main-nav .dropdown-menu.wwa-menu a:focus,
  #main-nav .dropdown-menu.wwa-menu a:active {
    color: #ffffff !important;
    background: #00a8c9 !important;
  }
}


/* --------------------------------------------
   MOBILE / TABLET NAV REPAIRS
   - fixes clipped left edge in portrait
   - forces readable white text in landscape too
   -------------------------------------------- */

/* Treat the collapsed nav as a drawer: room to breathe + no clipping */
.navbar-collapse.in,
.navbar-collapse.show {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overflow-x: visible;               /* avoid horizontal clipping */
  -webkit-overflow-scrolling: touch;
  padding: 0 14px;                   /* left/right padding for card margin */
}

/* When the nav is collapsed, make the dropdown flow INSIDE the drawer */
#main-nav .dropdown { position: static; }

/* Portrait phones (≤ 767px) */
@media (max-width: 767px) {
  #main-nav .dropdown-menu.wwa-menu {
    position: static !important;
    float: none;
    display: none;                   /* shown when .open/.show */
    width: auto;
    max-width: none;
    margin: 12px 14px 18px;          /* keeps left edge visible */
    padding: 10px 10px 14px;
    background: #006c8c;             /* high-contrast card */
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    transform: none !important;      /* cancel desktop centering */
  }
  #main-nav .dropdown.open > .dropdown-menu.wwa-menu,
  #main-nav .dropdown.show > .dropdown-menu.wwa-menu { display: block; }

  /* Force WHITE text for all submenu items */
  #main-nav .dropdown-menu.wwa-menu a,
  #main-nav .dropdown-menu.wwa-menu .wwa-item,
  #main-nav .dropdown-menu.wwa-menu .wwa-item span {
    color: #ffffff !important;
  }

  .wwa-item {
    display: block;
    margin: 8px 10px;
    padding: 14px 16px;
    font-size: 17px;
    font-weight: 700;
    background: #009ec1;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
  }
  .wwa-item:hover,
  .wwa-item:focus,
  .wwa-item:active {
    background: #00b8d4;
    color: #ffffff !important;
  }
}

/* Landscape phones & small tablets (e.g., iPhone landscape ~812–926px)
   Keep the SAME mobile submenu styling when the navbar is collapsed */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Only apply if the drawer is open/collapsed */
  .navbar-collapse.in .dropdown-menu.wwa-menu,
  .navbar-collapse.show .dropdown-menu.wwa-menu {
    position: static !important;
    float: none;
    display: block;
    width: auto;
    max-width: none;
    margin: 12px 14px 18px;
    padding: 10px 10px 14px;
    background: #006c8c;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    transform: none !important;
  }

  .navbar-collapse.in .dropdown-menu.wwa-menu a,
  .navbar-collapse.show .dropdown-menu.wwa-menu a,
  .navbar-collapse.in .dropdown-menu.wwa-menu .wwa-item,
  .navbar-collapse.show .dropdown-menu.wwa-menu .wwa-item,
  .navbar-collapse.in .dropdown-menu.wwa-menu .wwa-item span,
  .navbar-collapse.show .dropdown-menu.wwa-menu .wwa-item span {
    color: #ffffff !important;       /* ensure text is visible in landscape */
  }
}

/* Optional: subtle slide-in when drawer opens */
.navbar-collapse.in .wwa-menu,
.navbar-collapse.show .wwa-menu {
  animation: wwaSlideIn .22s ease both;
}
@keyframes wwaSlideIn {
  from { transform: translateY(6px); opacity: .96; }
  to   { transform: translateY(0);   opacity: 1; }
}


/* === Programs dropdown: guarantee visible text on ALL viewports === */
#main-nav .dropdown-menu.wwa-menu > li > a,
#main-nav .dropdown-menu.wwa-menu .wwa-item,
#main-nav .dropdown-menu.wwa-menu .wwa-item span {
  color: #ffffff !important;          /* force white text */
  text-shadow: none !important;        /* avoid washout on blue */
  line-height: 1.25;
  font-weight: 700;                    /* readable weight */
}

/* Pill background and states (works desktop & mobile) */
#main-nav .dropdown-menu.wwa-menu .wwa-item {
  background: #0a7eab;                 /* blue pill */
  border-radius: 12px;
  display: block;
  margin: 8px 10px;
  padding: 14px 16px;
  text-decoration: none;
}
#main-nav .dropdown-menu.wwa-menu .wwa-item:hover,
#main-nav .dropdown-menu.wwa-menu .wwa-item:focus,
#main-nav .dropdown-menu.wwa-menu .wwa-item:active {
  background: #12a6d0;
  color: #ffffff !important;
}


/* Keep submenu inside the mobile drawer, with side margins */
.navbar-collapse.in,
.navbar-collapse.show { padding: 0 14px; overflow-x: visible; }
#main-nav .dropdown { position: static; }
@media (max-width: 767px) {
  #main-nav .dropdown-menu.wwa-menu {
    position: static !important;
    margin: 12px 14px 18px;            /* prevents left cut-off */
    transform: none !important;
  }
}


/* ===== WONDER WORLD – Programs dropdown hard-fix (append at end) ===== */

/* 1) Reset the global "ul li { display:inline-block; }" just for the dropdown */
#site-header #main-nav .dropdown-menu li {
  display: block !important;
}

/* 2) Make the text always visible (iOS landscape too) */
#site-header #main-nav .dropdown-menu.wwa-menu a,
#site-header #main-nav .dropdown-menu.wwa-menu a span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* iOS Safari override */
  text-shadow: none !important;
  font-weight: 700;
  line-height: 1.25;
}

/* 3) Pill look + accessible hit-area */
#site-header #main-nav .dropdown-menu.wwa-menu a.wwa-item {
  display: block;
  background: #0a7eab;
  border-radius: 12px;
  margin: 10px 12px;
  padding: 14px 16px;
}
#site-header #main-nav .dropdown-menu.wwa-menu a.wwa-item:hover,
#site-header #main-nav .dropdown-menu.wwa-menu a.wwa-item:focus {
  background: #12a6d0;
  outline: none;
}

/* 4) Keep the card centered under “Programs” on desktop */
#site-header #main-nav .dropdown-menu.wwa-menu {
  z-index: 2000;
  min-width: 320px;
  border: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* 5) Mobile: prevent the left edge from being cut and force full readability */
@media (max-width: 767px) {
  /* Use the full viewport width minus small gutters; no off-screen clipping */
  #site-header #main-nav .dropdown-menu.wwa-menu {
    position: static !important;      /* sits inside the mobile drawer */
    width: calc(100vw - 28px);
    margin: 12px 14px 18px !important; /* equal side gutters */
    transform: none !important;
  }
  /* Ensure the menu actually shows when the parent is opened */
  #site-header #main-nav .dropdown.open .dropdown-menu.wwa-menu,
  #site-header #main-nav .open > .dropdown-menu.wwa-menu {
    display: block !important;
  }
}

/* 6) Kill old hover rules that flip colors inside nested ULs */
#site-header ul li a:hover { background: inherit; }
#site-header ul li ul.dropdown li a { color: inherit; }

/* =========================
   PROGRAMS DROPDOWN: HARD OVERRIDES
   Put this at the VERY END of your CSS
   ========================= */

/* 0) Make dropdown items vertical (your global li inline-block was breaking it) */
#site-header #main-nav .dropdown-menu li { display: block !important; }

/* 1) Pill look + spacing for every link inside the Programs menu */
#site-header #main-nav .dropdown-menu.wwa-menu a.wwa-item {
  display: block !important;
  margin: 10px 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: #0a7eab !important;
  text-decoration: none !important;
}

/* 2) FORCE visible text (desktop + iOS landscape) */
#site-header #main-nav .dropdown-menu.wwa-menu a,
#site-header #main-nav .dropdown-menu.wwa-menu a * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* iOS Safari */
  text-shadow: none !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Hover/focus states */
#site-header #main-nav .dropdown-menu.wwa-menu a.wwa-item:hover,
#site-header #main-nav .dropdown-menu.wwa-menu a.wwa-item:focus,
#site-header #main-nav .dropdown-menu.wwa-menu a.wwa-item:active {
  background: #12a6d0 !important;
  color: #ffffff !important;
}

/* 3) Desktop positioning: centered under “Programs”, but never wider than viewport */
#site-header #main-nav .dropdown-menu.wwa-menu {
  z-index: 3000 !important;
  max-width: min(92vw, 560px) !important;   /* prevent off-screen overflow */
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

/* 4) Collapsed drawer (phones portrait): sit inside the drawer with side gutters */
@media (max-width: 767px) {
  .navbar-collapse.in,
  .navbar-collapse.show { padding: 0 14px; overflow-x: visible; }

  #site-header #main-nav .dropdown { position: static; }

  #site-header #main-nav .dropdown-menu.wwa-menu {
    position: static !important;
    width: auto !important;
    margin: 12px 14px 18px !important;   /* fixes left-edge clipping */
    transform: none !important;
  }

  /* ensure it displays when opened */
  #site-header #main-nav .dropdown.open > .dropdown-menu.wwa-menu,
  #site-header #main-nav .dropdown.show > .dropdown-menu.wwa-menu {
    display: block !important;
  }
}

/* 5) Narrow landscape (phones/tablets when navbar may be uncollapsed):
      pin the card to the viewport so it never clips off-screen */
@media (max-width: 1024px) and (orientation: landscape) {
  #site-header #main-nav .dropdown-menu.wwa-menu {
    position: fixed !important;
    top: calc(56px + 8px) !important;    /* adjust if your header is taller */
    left: 12px !important;
    right: 12px !important;
    margin: 0 !important;
    transform: none !important;
    max-width: none !important;
    width: auto !important;
  }
}


/* === Make the Programs dropdown scrollable on mobile === */

/* Shared: scrollable menu container */
#site-header #main-nav .dropdown-menu.wwa-menu {
  /* allow inner scrolling */
  max-height: calc(100vh - 120px);      /* safe default; tweaked per mode below */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;     /* momentum scroll on iOS */
  overscroll-behavior: contain;          /* prevent background from scrolling */
  touch-action: pan-y;                   /* ensure vertical scroll gestures work */
}

/* Portrait (collapsed drawer) */
@media (max-width: 767px) {
  /* Drawer itself can scroll, but give the dropdown its own scroll too */
  .navbar-collapse.in,
  .navbar-collapse.show {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #site-header #main-nav .dropdown-menu.wwa-menu {
    position: static !important;
    margin: 12px 14px 18px !important;
    transform: none !important;
    /* Room for header + gutters */
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto;
  }
}

/* Landscape (we anchored it with position:fixed earlier) */
@media (max-width: 1024px) and (orientation: landscape) {
  #site-header #main-nav .dropdown-menu.wwa-menu {
    position: fixed !important;
    top: calc(56px + 8px) !important;    /* header height + small gap */
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;             /* define a bottom so max-height is clear */
    margin: 0 !important;
    transform: none !important;
    max-height: calc(100vh - 56px - 8px - 12px - 12px) !important;
    overflow-y: auto;
  }
}


/* === FADE + SLIDE ANIMATION for Programs Dropdown === */

/* Start hidden */
#site-header #main-nav .dropdown-menu.wwa-menu {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: all 0.35s ease;
}

/* When dropdown is visible */
#site-header #main-nav .dropdown.open > .dropdown-menu.wwa-menu,
#site-header #main-nav .dropdown.show > .dropdown-menu.wwa-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* On mobile (inside the drawer), fade from slightly below */
@media (max-width: 767px) {
  #site-header #main-nav .dropdown-menu.wwa-menu {
    transform: translateY(16px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease-in-out;
  }

  #site-header #main-nav .dropdown.open > .dropdown-menu.wwa-menu,
  #site-header #main-nav .dropdown.show > .dropdown-menu.wwa-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

#site-header #main-nav .dropdown-menu.wwa-menu {
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
}


/* --- Gallery layout fix for all classrooms --- */
.service-img {
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-img img {
  width: 100%;
  height: 280px;              /* consistent height */
  object-fit: cover;          /* crops nicely without distortion */
  border-radius: 12px;
}

.service-img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Ensure consistent spacing between rows */
.row {
  margin-bottom: 15px;
}

/* Make gallery look neat on mobile */
@media (max-width: 767px) {
  .service-img img {
    height: 200px;
  }
}

/* Show full image, no cropping */
.service-img {
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.service-img img {
  display: block;
  width: 100%;
  height: auto !important;     /* override any fixed height */
  object-fit: contain !important;
}


/* Open Programs on hover (desktops only) */
@media (hover:hover) and (pointer:fine) {
  #site-header .navbar-nav > li.dropdown:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Make sure the menu sits flush under the tab (no gap to fall through) */
#site-header .navbar-nav > li.dropdown { position: relative; }
#site-header .dropdown-menu.wwa-menu {
  top: 100% !important;          /* directly under the tab */
  margin-top: 0 !important;      /* remove default gap */
  left: 50% !important;
  transform: translateX(-50%) !important; /* keep it centered if you use centering */
}

/* Invisible "hover bridge" to keep :hover active while moving into the menu */
#site-header .navbar-nav > li.dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;                  /* small buffer area */
  bottom: -12px;                 /* sits between the tab and the dropdown */
  pointer-events: none;          /* doesn’t block clicks */
}


/* Toddler gallery — even spacing and no crop */
.gallery-row > [class*="col-"] { 
  margin-bottom: 24px; 
}

.gallery-row .service-img img {
  width: 100%;
  height: auto;          /* keep full image visible */
  display: block;
  object-fit: contain;   /* ensures no cropping for mixed aspect ratios */
  border-radius: 10px;
  border: 2px solid #d3d3d3;
}