@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600&display=swap');
body{font-family: "Sora", sans-serif; background: #F3F9FD; font-weight: 400;}
strong{font-weight: 600;}
.btn.btn-light{border-radius: 30px;}
.btn.btn-primary{background: #03246B !important; border: 0; padding: 0.8rem 1.5rem; border-radius: 30px;}
.btn.btn-primary:hover { background: #0357b9 !important; color: #fff }
.btn.btn-dark-blue{background: #06246D !important; border: 0; padding: 0.7rem 1.5rem; border-radius: 30px; color: #fff;}
.info-bg{background:#65BDC2; color: #ffffff; font-size: 13px; padding: 2px 15px;}
/* header { background: #0357B9; } */
/* .navbar.navbar-expand-lg { border-left: 5px solid #65BDC2; } */
nav .navbar-brand{margin-right: 0;}
nav .navbar-brand img{width: 240px; transition:0.3s;}
.navbar-expand-lg .navbar-nav .nav-item { margin: 0 1rem; }
.navbar-expand-lg .navbar-nav .nav-link { font-size: 1rem; }
.top-contact{display: flex; justify-content: end; align-items:center; margin-bottom:0; width:45%}
.call-btn{display: block; text-decoration:none; font-size: 0.9rem; align-items:center; margin-right:2rem; color: #fff; text-transform: uppercase;}
.call-btn i{color:#ffffff; margin:0 8px}
.call-btn span{color: #ffffff; font-size: 0.9rem;}
.site-navigation { padding: 0 !important; }
.site-navbar {margin: auto; z-index: 99; position: relative; width: 100% !important; background: #0357B9 !important;}
.sticky-wrapper {height: auto !important;}
.sticky-wrapper.is-sticky .site-navbar { background: #0357B9; z-index: 99 !important; width: 100% !important; padding: 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);}
.sticky-wrapper.is-sticky .site-navbar .navbar{padding: 0;}
.sticky-wrapper.is-sticky .site-navbar .navbar .navbar-brand{margin: 0;}
.sticky-wrapper.is-sticky .site-navbar .navbar .navbar-brand img{width: 150px; transition:0.3s;}
/* .sticky-wrapper.is-sticky .top-contact{display: none;} */
.site-navbar .site-navigation .site-menu{width: 45%;}
.site-navbar .site-navigation .site-menu > li { padding: 0; margin: 0 0.5rem; }
.site-navbar .site-navigation .site-menu > li:first-child{margin-left:0; }
.site-navbar .site-navigation .site-menu > li > a{text-transform: uppercase; padding: 25px 0; font-size:0.85rem; position:relative;}
.site-navbar .site-navigation .site-menu > li.current_page_item > a::before, .site-navbar .site-navigation .site-menu > li.current-menu-ancestor > a::before{content: ''; position:absolute; left:0; bottom:15px; height:2px; width:100%; background: #00C3E6;}
.site-navbar .site-navigation .site-menu > li:last-child >a::before { content: none; }
.site-navbar .site-navigation .site-menu .has-children:hover > .dropdown-menu, .site-navbar .site-navigation .site-menu .has-children:focus > .dropdown-menu, .site-navbar .site-navigation .site-menu .has-children:active > .dropdown-menu { display: block; }
.site-mobile-menu .site-nav-wrap li.active > a, .site-navbar .site-navigation .site-menu .has-children .dropdown-menu a.active { color: #111111; }
.site-navbar .site-navigation .site-menu .has-children .dropdown-menu { border-radius: 0; border: 0; min-width: 20rem; }
.site-navbar .site-navigation .site-menu .has-children .dropdown-menu > li > a { border-radius: 0 !important; padding: 8px 12px; text-decoration: none;}
.site-navbar .site-navigation .site-menu .has-children .dropdown-menu a { font-size: 1rem; }
.site-navbar .site-navigation .site-menu .has-children .dropdown-menu > li > a:hover, .site-navbar .site-navigation .site-menu .has-children .dropdown-menu > li.active > a{ color: #ffffff; background: #0357b9; }
.side-toggle { position: absolute; right: 0; top: 25px; margin: auto; color: #0d6efd; font-size: 1.25rem; }
.menu-bar{width: 50px; height:50px; margin-left: 1rem; display: flex; flex-direction: column; align-items:center; justify-content: center;}
.menu-bar span{width: 25px; height:2px; background: #fff; margin-bottom: 5px; display: block;}
.site-navbar .site-navigation .site-menu .has-children .dropdown-arrow {
  display: none;
  font-size: 0.7rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown-arrow.active {
  transform: rotate(180deg) translate(-50%, 50%);
  margin-right: 10px;
}
.site-navbar .site-navigation .site-menu .has-children{
  position: relative;
}

.site-navbar .site-navigation .site-menu .has-children > .dropdown-arrow {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 16px;
  text-align: center;
  color: #fff;
}

.serach-overlay { height: 100%; width: 100%; display: none; position: fixed; z-index: 999; top: 0; left: 0; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); }
.overlay-content { position: relative; top: 46%; width: 60%; text-align: center; margin-top: 30px; margin: auto; }
.serach-overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: white; }
.serach-overlay .closebtn:hover { color: #ccc; }
.serach-overlay input[type=text] { padding: 15px; border-radius:0; font-size: 17px; border: none; float: left; width: 80%; background: white; }
.serach-overlay input[type=text]:hover { background: #f1f1f1; }
.serach-overlay button { float: left; width: 10%; padding: 15px; background: #0853F4; font-size: 17px; border: none; cursor: pointer; color: #ffffff; }
.serach-overlay button:hover { background: #987452; }

.main-banner{position: relative; background: #000;}
/* .main-banner::before{content: ''; position: absolute; z-index: 1; top:0; left:0; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%;} */
.main-banner h1{font-size: 6rem; color: #00C3E6; text-align:right; text-transform:uppercase;}
.main-banner h1 span{color: #fff;}
.main-banner .carousel-item img{opacity: 0.2;}
.main-banner .carousel-caption{text-align: left; left:12%; bottom: auto; top: 24%; width:700px;}
.bannerImages{position: absolute; top: 30%; right:12%;}
.bannerImages a{font-size: 1rem; color: #000; position: absolute; line-height: 24px; display: block; width:170px; height:170px; background:#fff; right:15%; top: 40%; text-align:center; z-index:10; border-radius:50%;padding:1.5rem 1rem 1rem; text-decoration:none}
.bannerImages a:hover{background: #3D9BE9; color: #fff;}
.bannerImages a img{display:block; margin:auto; width: 35px;}
.bannerImages a:hover img{filter:brightness(100);}
.bannerImages a span{display:block;}

.service-block{padding: 2.5rem; color: #fff; height:100%; display: flex; align-items: center;}
.service-block h3{letter-spacing: 1px; font-size: 2.5rem; font-weight: 600;}
.service-block a{text-decoration: none; color:#fff;}
.service-block a i{margin-left: 6px; transform: rotate(-25deg); font-size: 0.9rem; transition: 0.3s;}
.service-block:hover a{color: #000;}
.service-block:hover a i, .program-block a:hover i{transform: rotate(0deg); transition: 0.3s;}
.service-block ul{padding-left: 1.5rem;}
.service-block ul li{display: block; position:relative; margin-bottom:0.6rem}
.service-block ul li::before{content: '-'; position:absolute; color:#fff; left:-1.5rem;}
.service-block.primary-block{background: #0357B9;}
.service-block.info-block{background: #3D9BE9;}


.all-programs{padding: 4rem 0;}
.all-programs h2{font-size: 5rem; font-weight:600; text-transform: uppercase; width: 50%;}
.all-programs h2 span{display: block; text-align:right;}
.program-block{width: 40%;}
.program-block a{text-decoration: none; color:#000;}
.program-block a i{margin-left: 6px; transform: rotate(-25deg); font-size: 0.9rem; transition:0.3s;}

.classprogram{text-decoration: none; overflow: hidden; margin-bottom: 1.3rem; display:block; position:relative; font-size: 1.3rem;}
.classprogram::before{content: ''; position:absolute; bottom: 0; left: 0; transition: 0.3s; width:100%; height:50%; background:linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);}
.classprogram:hover::before{border-radius: 0 30px; transition: 0.3s;}
.classprogram span{    position: absolute;
    bottom: 1.5rem;
    left: 0;
    color: #fff;
    width: 95%;
    text-align: center;
    right: 0;
    margin: auto; transition: 0.3s;}
.classprogram img{border-radius: 0; transition: 0.3s;}
.classprogram:hover img{border-radius: 0 30px; transition: 0.3s;}
.classprogram:hover span{bottom: 1.5rem; transition: 0.3s;}

.team-section{margin: 5rem 0;}
.teams .owl-item:nth-child(even) .team-item img{border-radius: 150px;}
.team-item{display: block; text-decoration:none; color:#fff; position: relative;}
.teams .owl-item:nth-child(odd) .team-item:hover::before{content: ''; transition: 0.3s; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%;}
.teams .owl-item:nth-child(even) .team-item:hover::before{content: ''; transition: 0.3s; border-radius: 150px; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%;}
.team-item .member-name{position: absolute; transition:0.3s; left: 0; text-align: center; width: 100%; bottom: -6rem;}
.team-item:hover .member-name{bottom: 3rem; left: 0; text-align: center; width: 100%; transition:0.3s}
.team-item .member-name h3{font-size: 1.3rem; font-weight: 600; margin-bottom: 5px;}
.team-block:hover::before{content: ''; transition: 0.3s; border-radius: 0; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%;}
.team-block{overflow: hidden;}
.team-block h3{color: #fff !important;}

.newsletter{clear: both;}
.newsletter h2{padding:0 0 .5rem; text-align:left; font-size:4rem; text-transform: uppercase;}
.newsletter h4{padding:0 0 .5rem; font-size: 1.25rem;}
.news-letter-form{background: #0357B9; padding: 3rem 0; color: #fff;}
.news-letter-form .form-control{background: transparent; padding-left: 0; border-radius: 0; border:0; border-bottom:1px solid #fff; color:#fff;}

.news-letter-form .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
.news-letter-form .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
.news-letter-form .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
.news-letter-form .form-control:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

.submit-button{width: 120px; height:120px; border-radius:50%; background:#fff; color:#000;}
.submit-button:hover{background:#3D9BE9; color:#fff;}

.quickConnectSection{background-color: #06246D; background-image: url('../images/eyeplasticmd-logo-v4.png'); background-position: center; background-size: 50%; background-repeat: no-repeat; padding: 6rem 0; color: #ffffff; font-weight:300;}
.quickConnectSection h2{font-size: 3rem; color: #fff;}
.quickConnectSection h2 span{color: #0853f4; font-weight:600;}
.mailingAddress{padding-left: 3.5rem; margin-top: 2rem;}
.mailingAddress li{display: block; position: relative; margin-bottom:2rem;}
.mailingAddress li a{display: block; text-decoration: none; color:#ffffff;}
.mailingAddress li::before{top: 0; left: -3.5rem; bottom: 0; margin: auto; padding:10px; text-align:center; font-weight: 700; color: #ffffff; width: 45px; height: 45px; border-radius: 50px; background: #0853f4; position:absolute; font-family: "Font Awesome 5 Free";}
.mailingAddress li:nth-child(1)::before{content: '\f3c5';}
.mailingAddress li:nth-child(2)::before{content: '\f0e0';}
.mailingAddress li:nth-child(3)::before{content: '\f095';}
.mailingAddress li:nth-child(4)::before{content: '\f1ac';}
.quickConnect{background: #F3F9FD; padding:2rem}
.quickConnect h3{font-weight: 700;}
.quickConnect .form-control{padding: 0.8rem 0.75rem; border-radius:30px;}
.quickConnect .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}
.quickConnect .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}
.quickConnect .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}
.quickConnect .form-control:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}
.free-trial{display: none;}
footer{color: #ffffff; padding: 3rem 0rem 0; background: #000000; font-weight:300}
footer h4{color: #ffffff; font-weight: 700; font-size: 1.5rem;}
footer .container{position: relative; z-index: 1;}
footer ul{padding-left: 0;}
footer ul li{display: block; padding-left:1.2rem;}
footer ul li a{color: #fff; text-decoration: none; padding: 0.1rem 0; display:block; position:relative;}
footer ul li a:hover{color: #ccc;}
footer ul li a::before{content: '-'; position:absolute; color:#fff; left:-1rem}
.social-icons{margin: 1rem 0;}
.social-icons a{text-decoration: none; color: #ffffff; margin-right:6px; font-size: 1rem; width: 40px; height: 40px; border-radius:50%; border: 1px solid #fff; display:inline-flex; justify-content: center;align-items: center;}
.social-icons a:hover{border: 1px solid #00C3E6;background: #00C3E6;}
.footer-address { padding: 0; }
.footer-address li { display: flex; align-items: start; margin-bottom: 0.5rem; padding-left: 0;}
.footer-address li a { display: block; text-decoration: none; color: #fff; word-break: break-all;}
.footer-address li a span { display: inline-block;}
.footer-address li i { margin-right: 0.8rem; margin-top: 0.4rem; }
.footer-address li a::before{content: none;}
.offcanvas-body .footer-address li a { color: #000;}
.offcanvas-body .social-icons a { color: #000; border-color: #000;}
.offcanvas-body .social-icons a:hover{ color: #fff; border-color: #00C3E6;}

.copyRights{margin-top: 3rem;}
.copyRights .container{color: #ffffff; padding: 1.5rem 1rem; font-weight:300; border-top:1px solid rgba(255, 255, 255, 0.2);}

.inner-banner{background: #C5DDF8; padding:2rem 0;}
.inner-banner h1{color: #0357B9; text-transform:uppercase; font-size: 4rem; margin-bottom: 0;}
.inner-section{padding: 3rem 0;}
.inner-section h2{color: #00D9EF; font-size:3rem; font-weight:600;}
.inner-section h3{color: #3D9BE9; font-size:2rem; font-weight:600;}
.dance-section img{border-radius: 250px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);}
.ms-img{border-radius:10px!important;}
.ms-video {min-height: 500px;}
.inner-section .classes-item{padding-left: 1.5rem;}
.inner-section .classes-item li{position: relative; display:block; margin-bottom:10px;}
.inner-section .classes-item li::before{content: '-'; left: -1.5rem; top: 0px; position: absolute; }

.connect-form{padding: 1.5rem; background: #fff; border-radius: 1.5rem; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);}
.location-map{border-radius: 0; border:0;}

.gallery { display: flex; flex-wrap: wrap; margin-bottom: 2rem; }
.bg { width: 100%; height: 300px; background-size: cover; transform: scale(1, 1); transition: all 300ms ease; border-radius: 0; position: relative; }
.plus-icon { display: none; position: absolute; z-index: 9; width: 45px; height: 45px; margin: auto; transition: 0.3s; left: 0; top: 0; right: 0; bottom: 0; }
.bg:hover .plus-icon { display: block; transform: scale(1.2); transition: 0.3s; }
.gallery a { display: block; text-decoration: none; width: 23.5%; overflow: hidden; outline: none; margin: 0.5rem; box-shadow: 0 0px 10px rgb(0, 0, 0, .3); padding: 0; border-radius: 0; position: relative; border: 2px solid #fff; }
.bg:hover::before { content: ''; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(3, 87, 185, 0.45); }

.vidoe-item{width: 100%; height:300px; box-shadow:0 0 10px rgba(0, 0, 0, 0.2); padding:3px}

.payment-img{width: 250px; margin: auto;}
.modal .btn-close {
  opacity: 1;
  position: absolute;
  right: -15px;
  top: -15px;
  color: #fff;
  background: #191b1a;
  width: 30px;
  height: 30px;
  border-radius: 50px;
}
table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }

    th, td {
      border: 1px solid #000;
      padding: 8px;
    }

    th {
      background: #fff;
      font-weight: bold;
    }

    /* Custom background colors (like your screenshot) */
    .blue { background: #d9eaf7; }   /* light blue */
    .pink { background: #f7d9eb; }   /* light pink */
    .orange { background: #fde1c3; } /* light orange */
    .gray { background: #eeeeee; }   /* light gray */
    .green{background: #d9ead3;}  /* light green */
@media (min-width:1921px) and (max-width:7000px) {
	html, body, header { max-width: 1400px; margin: auto; overflow-x: hidden;}
}
@media (max-width: 1400px) {
	.social-icons a{margin: 0; width:35px; height:35px;}
  nav .navbar-brand img{width:180px;}
}
@media (max-width: 1320px) {	
	.site-navbar .site-navigation .site-menu > li{margin: 0 0.4rem;}
	.site-navbar .site-navigation .site-menu > li:last-child > a{padding-right: 0;}
	.site-navbar .site-navigation .site-menu > li > a{padding: 20px 0; font-size:0.8rem}
	nav .navbar-brand img{width: 130px;}
	.main-banner .carousel-caption h1{padding:0;}
	.blog-item h4{font-size: 1.2rem;}
	.blog-item p{line-height: 1.2rem;}
	.section1 .welcome-content{padding: 2rem;}
	.site-navbar .site-navigation .site-menu{margin-right: 0.5rem;}
	.section2::before{height: 90%; top:5%;}
	.section3{margin-top:-1.1rem; padding: 5rem 0;}
	.testimonials-carousel{padding: 1rem;}
	.sticky-wrapper.is-sticky .site-navbar .navbar .navbar-brand img{width: 130px;}
	.sticky-wrapper.is-sticky .top-contact{display: flex;}
/* 	.about-block::before, .about-img{width: 375px; height:375px;} */
	.main-banner h1{font-size: 4rem;}
	.bannerImages .banner1{width: 70%; bottom:10%; left:0;}
	.bannerImages .banner2{width: 50%;}
	.bannerImages span{right: 0;}
	.call-btn span{font-size: 0.9rem;}
	.careServices a.image-link{height: auto;}
	.main-banner .carousel-caption{left:5%}
	.main-banner .carousel-control-next, .main-banner .carousel-control-prev{width: 5%;}
	.careServices .ServiceHeading h4 a{font-size: 1.3rem;}
  .testimonial-list{column-count: 2;}
  .service-block h3{font-size: 1.8rem;}
  .service-block{padding: 1rem;}
  .newsletter h2{font-size: 6rem;}
  .service-block ul li{margin-bottom: 0.5rem;}
}
@media (max-width: 1200px) {
	.site-navbar .site-navigation .site-menu .has-children .dropdown-arrow {
		display: none;
	}
	.gallery a{width: 22.5%;}
	.bg{height: 200px;}
  .btn{padding: 0.5rem 1rem;}
  .top-contact{margin-bottom: 0; width: 70%;}
  .call-btn{margin-right: 0.75rem;}
  .call-btn i{margin-right: 5px;}
  .site-menu-toggle { padding: 0.75rem 1rem; background: #212529; color: #fff; border-radius: 0.4rem; }
}
@media (max-width: 1030px) {
	.site-navbar .site-navigation .site-menu > li{margin: 0 0.6rem;}
	.menu-address{padding: 10px;}
	.main-banner .carousel-caption {font-size: 0.9rem;}
	.main-banner .carousel-caption h1{padding:0;}
	.main-banner .carousel-caption h4{font-size: 1.2rem; padding:0;}
	.main-banner .carousel-caption{width: 550px;}
	.footerblog li a{font-size: 1.2rem; line-height: 24px;}
	.all-programs h2{font-size: 4rem;}
  .classprogram{font-size: 1.6rem;}
	.main-banner .carousel-control-next, .main-banner .carousel-control-prev{width: 4%;}
/* 	.bannerImages span{padding: 1.8rem 1rem 1rem; height: 130px; width: 130px;} */
	.careServices .ServiceHeading h4 a{font-size: 1.3rem;}
	.site-navbar .site-navigation .site-menu > li > a{font-size: 0.8rem;}
	.service-block ul li{margin-bottom: 0.2rem;}
  .call-btn{margin-right: 1rem;}
	
}
@media (max-width: 990px) {
	
	.getInTouch{margin-top: 2rem; padding: 2rem 2rem; background-size: cover;}
	.verticle-text{position: inherit; transform: rotate(0deg)}
	.section2 h2, .section3 h2{font-size: 2rem;}
	.main-banner .carousel-caption{width:450px; left:0;}
  .main-banner .carousel-caption h1{font-size: 3.3rem;}
	.bannerImages{top: 25%;}
	.all-programs h2{font-size: 2.6rem;}
  .menu-bar{display: none;}
  .inner-banner h1{font-size: 3rem;}
  .inner-section h2{font-size: 2rem;}
  .inner-section h3{font-size: 1.5rem;}
}
@media (max-width: 767px) {
	.top-contact{width: auto;}
	.btn{padding: 0.5rem 1rem;}
	nav .navbar-brand img{width: 150px; margin: auto;}
	.sticky-wrapper{height: auto !important;}
	.sticky-wrapper.is-sticky .site-navbar{position: initial !important;}
	.sticky-wrapper.is-sticky .site-navbar .navbar .navbar-brand img{width: 120px;}
	.menu-address .container{display: block; text-align: center;}
	.btn.btn-info{padding: 0.4rem 1rem;}
/* 	.top-contact{display: block;} */
	.top-contact .call-btn{margin-right: 1.25rem;}
	.top-contact .call-btn:nth-of-type(3){position: fixed; left:0; bottom: 0; z-index: 99; width:100%; background:#0853f4; padding: 0.7rem; text-align: center; display: block; font-size:1.25rem}
	.top-contact .call-btn:nth-of-type(3) span{font-size:1.25rem}
	.main-banner{padding: 0;}
	.main-banner .carousel-caption{width: 100%; top:10%;}
	.main-banner .carousel-caption h1{font-size: 2rem; text-align:center}	
  .main-banner .carousel-caption h1 span{display: block;} 
	footer h4{margin-top: 1.5rem;}
  .bannerImages{display: none;}
  .newsletter h2{font-size: 3rem;}
  .news-letter-form{padding: 2.5rem 1rem;}
  .free-trial{position: fixed; bottom: 0; left: 0; width:100%; display:block; font-size:1.1rem; border-radius:6px 6px 0 0; z-index: 99;}
	.classes-item{margin-top: 2rem;}
	.overlay-content{width: 90%;}
	.serach-overlay button{width: 20%;}
	.team-block img{width: 100%;}
	.gallery a{width: 31%;}
	.bg{height: 180px;}
}
@media (max-width: 500px) {
	.navbar-brand{width: 100%; margin-right:0; text-align: center;}
	nav .navbar-brand img{width: 150px; width: 230px;}
	.sticky-wrapper.is-sticky .site-navbar .navbar .navbar-brand img{width: 180px;}
	footer{margin-bottom: 3.1rem;}
  .inner-banner h1{font-size: 2rem;}
  .all-programs h2, .program-block{width: 100%;}
  .gallery a{width: 100%;}
	.bg{height: 250px;}
}

.gallery.news-images a { display: block; width: 100%; margin: 0;}