/* Responsive */
@media screen and (min-width:1400px){
    .our-approach-wrapper::before {right: calc(50% - 690px);}
}

@media screen and (max-width:1270px){

main > .content {overflow-x: hidden;}
.container { padding-left: 15px !important; padding-right: 15px !important;}
.custom-navbar { padding: 8px 0px !important;}
.custom-navbar .navbar-brand { width: 90px;}	
.banner-wrapper {padding: 0px 40px;}
.banner-wrapper .carousel-control-prev { left: -40px;}
.banner-wrapper .carousel-control-next { right: 0px;}
.programming-1 { width: 180px;}
.programming-1 h3 { height: 150px;}
.qcode-item-1 h3 {font-size: 20px;}
.program-info { padding: 30px 20px;}
.button-group a + a { margin-left: 5px;}
.banner-wrapper::before { width: 459px;height: 625px;}
.video-wrapper::after {width: 230px; height: 160px;bottom: -54px;left: 0px;}
.our-approach-wrapper { position: relative; padding-bottom: 60px !important;}
.program-features { padding: 25px 25px;}
.number-of-class {font-size: 16px;padding-right: 100px;}
.number-of-class .total-price {width: 90px;font-size: 30px;}
.pt-5 {padding-top: 40px !important;}
.pb-5 {padding-bottom: 40px !important;}
.our-approach-wrapper::before {width: 570px;height: 465px;right: 0px;}
.qcode-image-2 {width: 1100px; right: -50px;height: 700px;}
.frame-item-1 {right: 480px;    top: 200px;}
.frame-item-2 {right: 305px;top: 20px;}
.frame-item-3 {right: 65px;top: 100px;}
.frame-item-1 h3, .frame-item-2 h3, .frame-item-3 h3 {top: 35px; left: 30px;line-height: 18px; font-size: 15px;}
.frame-item-1, .frame-item-2, .frame-item-3{ width:160px; height: 160px;}
.frame-icon-1, .frame-icon-2, .frame-icon-3 { width: 80px;}
.frame-icon-1 {left: 35px;bottom: 15px;}
.frame-icon-3 { bottom: 0px;}
.about-image {top: 85px;}
video{ width: 100%; height: auto;}
.course-image {height: auto;}
.course-content ul { margin-bottom: 25px;}
.about-image {left: 0px; width: 500px;}

}

 

@media screen and (max-width:992px){
	
.custom-navbar { padding: 8px 0px;}
.custom-navbar .navbar-brand { width: 80px;}
.custom-navbar .nav-link.btn-nav { width: 80px;font-size: 14px;}
.custom-navbar .nav-link {font-size: 16px;}
.custom-navbar .nav-item { margin-left: 25px;}
.banner-wrapper { padding:0px 25px}
.banner-wrapper .carousel-control-prev { left: -35px;}
.banner-wrapper .carousel-control-next { right: -35px;}
.banner-wrapper .carousel-control-next, .banner-wrapper .carousel-control-prev {width: 6%;}
.banner-wrapper .carousel { margin-top: 80px;}
.programming-details {justify-content: flex-start;}
.banner-wrapper::before, .our-approach-wrapper::before, .qcode-image{ display:none;}
.programming-details > div + div { margin-left: 30px;}
.sub-heading { font-size: 30px;}
.sub-heading {font-size: 35px;margin-bottom: 30px;}
.approach-steps h3 {font-size: 24px;margin-bottom: 10px;}
.approach-steps p {font-size: 15px;line-height: 22px;}
.qcode-item-1 {margin: 15px 0px;}
.qcode-item-1 h3 {font-size: 22px;}
.instructors-image {width: 150px;height: 150px;}
.instructors-1 h3 {font-size: 22px;}
.footer-links ul li { margin-left: 15px;}
.footer-links ul li a { font-size: 13px;}
.copyright p { font-size: 12px;}
.about-image { margin-top: 80px;}
.program-image .img-fluid {  height: auto;}
.program-info {margin-top: 50px;}
.button-group {align-items: flex-start; flex-direction: column;}
.button-group a + a { margin-left: 0px;margin-top: 10px;}
.more-contents ul li {width: 100%; margin:12px 0px;}
.talkToUs {padding: 30px;width: 330px;}
.benefits-wrapper {padding: 0px 0px;}
.benefits-wrapper::before {display: none;}
.program-description p {text-align: justify;}
.program-image { margin-top: 110px;}
.program-features {margin: 35px 0px;min-height: 148px;padding: 10px 20px;}
.price-box { margin-top: 35px;margin-bottom: 50px;}
.cart-details {margin-top: 30px;}
.program-features ul li { margin: 8px 0px; width: 100%;}
.request-dialog { max-width: 100%; margin: 1.75rem 10px; overflow: hidden;}
.video-wrapper { margin-top: 10px; height: auto; margin-bottom: 40px;}
textarea.form-control {height: 110px;font-size: 15px;}
.qcode-image-2 {display: none;}
.about-image {width: 400px;top: 90px;}
.cloudImage, .qcodeLogo {display: none;}
.qcode-item-1{ width: 100%;}
.price-box { flex-direction: column;}
.priceWrap {flex-direction: column; align-items: center; padding-right: 0px;}
.price-box > .offerWrap { margin-top: 15px;}
.price-box h2 { text-align: center;}
.modal-dialog.modal-lg {max-width: 650px;}
.carouselSlider .carousel .control-prev.control-arrow {left: -30px;}
.instructors-1{ height:340px;}
.job-info { width: 300px;padding-left: 10px; display: flex;  justify-content: flex-end;}

.timing-zone ul.time-ul > li, .react-datepicker-wrapper input {font-size: 13px;padding: 2px 0px;}
.timing-zone ul.time-ul > li > .time-label { width: auto;}
.timing-zone ul.time-ul > li span { margin-right: 5px;width: 15px;}
.timing-zone ul.time-ul > li > .time-label { left: 5px;}

body main > .content {height: 100%;}
.custom-radio-box .custom-control.custom-radio {width: auto !important;}

}

@media screen and (max-width:767px){
    .navbar-collapse .mobile-logo { display: block !important;}
.custom-navbar { padding: 8px 15px;}	
.custom-navbar .navbar-brand {width: 60px;}
.custom-navbar.sticky .navbar-brand {width: 60px;}
.navbar-expand-md .navbar-toggler {position: absolute;cursor: pointer;top: 21px; right: 15px; border: none; padding: 0px !important; display: flex; width: 30px; height: 23px; justify-content: flex-end; align-items: center;}
.navbar-toggler-icon1 {display: inline-block;width: 26px;height: 3px;vertical-align: middle;background: #000; border-radius: 20px;}
.navbar-toggler-icon1::before, .navbar-toggler-icon1::after{ content:''; border-radius: 20px; background: #000; height: 3px; width: 30px; position: absolute; right:0px; top:0px;}
.navbar-toggler-icon1::after{ top: auto; bottom: 0px;}
.navbar-collapse {height: 100%;padding: 0px 0px !important;width: 0;position: fixed;z-index: 9999;top: 0;right: 0;background: #ffffff;overflow-x: hidden;transition: 0.5s; display: flex; flex-direction: column !important; justify-content: start !important; align-items: center;}
.navbar-nav { position: relative; width: 100%; text-align: center;margin-top: 80px; height: 100%;}
.custom-navbar .nav-item {margin-left: 0px;margin: 15px 0px;}
.custom-navbar .navbar-nav li + li{border-top: none;}
.custom-navbar .navbar-nav .nav-link {padding: 0px !important;font-size: 20px;font-weight: 400;}
.custom-navbar .navbar-nav li:last-child { margin-left: 0px; margin-top: 0px;}
.custom-navbar .navbar-nav .nav-link.btn-nav { width: 150px;height: 50px;font-size: 18px;}
.close-div { display: block;}
.close-nav {position: absolute;cursor: pointer;right: 20px;top: 20px;width: 25px;height: 25px;}
.close-nav::before, .close-nav::after{ content:''; background: #000; height: 2px; width: 30px; position: absolute; left:0px; top:10px;border-radius: 4px;transform: rotate(45deg);}
.close-nav::after{  bottom: -4px;transform: rotate(-45deg);}	
.banner-wrapper .carousel {margin-top: 50px;}
.content-info h2 {font-size: 24px;}
.content-info p {font-size: 15px; padding-right: 0px; line-height: 22px; margin-bottom:20px;}
.programming-details { justify-content: space-between;}
.programming-1 { width: 48%; margin: 35px 0px; padding: 10px;}
.programming-1 a span, .content-info a span {width: 10px;}
.banner-wrapper .carousel-indicators {bottom: -50px;}
.banner-wrapper .carousel {margin-top: 50px; margin-bottom: 30px;}
.carousel-wrap { min-height: auto; padding-right: 0px;}
.programming-1 h3 { font-size: 16px; line-height: 25px; height: 100px;}
.programming-1 a { font-size: 14px;}
.sub-heading { font-size: 28px; margin-bottom: 15px;}
.approach-steps h3 { font-size: 18px;  margin-bottom: 5px;}
.pb-5 { padding-bottom: 25px !important;}
.pt-5 {padding-top: 25px !important;}
.approach-steps h3 { font-size: 18px;margin-bottom: 5px;}
.approach-steps p { font-size: 14px; line-height: 22px;}
.qcode-item-1 {margin: 10px 0px;}
.qcode-item-1 {padding: 20px;}
.qcode-item-1 h3 {font-size: 20px;}
.instructors-image {margin: 0px auto 20px;}
.footer-links ul, .copyright p {text-align: center;}
.footer-links ul {justify-content: center;flex-wrap: wrap;}
.footer-links ul li {margin-left: 5px; margin-right:5px;}
.copyright p { margin-bottom: 5px;}
.about-content {margin-top: 0px;padding-left: 0px;}
.right-box {padding: 25px 0px;}
.inner-heading h2 {font-size: 24px;}
.program-info { margin-top: 25px;}
.program-description { padding: 35px 0px;}
.right-box::before, .right-box::after {display: none;}
.program-description h3, .more-contents h3 {margin-bottom: 15px;}
.benefits-list ul {padding: 0px 0px; padding-right: 0px;}
.modal-bottom {padding: 35px 25px 30px; min-height: 500px;}
.modal-top img { height: 70px; margin: 12px 0px;}
.modal-top ul li a {font-size: 20px;padding: 10px 15px;}
.custom-radio-box .custom-radio .custom-control-label {font-size: 16px;}
.other-login ul li a {height: 45px; width: 45px;padding: 12px;}
.modal-bottom .form-control, .modal-bottom .form-control:focus, .modal-bottom .btn-login { height: 50px;}
.modal-bottom .btn-login {font-size: 20px;}
.other-login ul { margin: 15px 0px;}
.programming-details > div + div {margin-left: 15px;}
.banner-wrapper { padding:0px 15px}
.banner-wrapper .carousel-control-prev { left: -26px;}
.banner-wrapper .carousel-control-next { right: -26px;}
.program-image {margin-top: 0px;}
.program-features ul, .program-features .learner-box { width: 100%;}
.program-features ul li { display: flex;width: 100%;}
.learner-box h4 {text-align: left;}
.learner-box h4 span {right: auto;left: 0px;}
.program-features ul li {font-size: 16px;}
.learner-box h4 small {justify-content: flex-start;font-size: 15px;line-height: 22px;}
.program-features { padding: 15px;}
.number-of-class .total-price {width: 105px;font-size: 30px;}
.session-1 { margin: 15px 0px;}
.number-of-class {padding-right: 120px;}
.btm-fullWidth { padding: 10px 40px; margin-top: 5px;width: auto;}
.cart-item-1 {flex-wrap: wrap; padding:20px 0px;}
.cart-item-1 .cart-program-details{ width: 70%;padding-right: 15px;}
.cart-program-details .cart-content h3 {font-size: 16px;margin-bottom: 10px;}
.cart-program-details .cart-content ul li {font-size: 14px;}
.cart-price { width: 30%;justify-content: flex-start;padding-right: 20px;}
.item-close {position: absolute;top: 20px;right: 0px;}
.cart-details {  margin-top: 15px;}
.modal-top {height: 144px;}
.success-box h2 {font-size: 22px;line-height: 30px;margin-bottom: 10px;}
.success-box p { font-size: 14px;line-height: 22px; margin-bottom: 25px;}
.talkToUs {width: 100%;  min-height: auto;padding: 35px 20px;}
.talkToUs h4 {font-size: 22px;}
.content-wrap h2 {font-size: 22px;}
.content-wrap p {font-size: 14px;}
.timeslot-wrap { overflow: scroll;}
.timing-wrap, .day-wap {width: 800px;}
.modal-body.enquiry-modal { padding: 20px 20px;}
.cms-page h2 {font-size: 24px;}
.cms-page h3 {font-size: 20px;}
.cms-page p {font-size: 14px; line-height: 25px;text-align: justify;}
.cms-page.text-center.mb-5 {margin-bottom: 30px !important;}
.career-wrapper {border-left-width: 5px; padding: 15px;}
.subject-heading h3 { margin-bottom: 2px;}
.short-description { align-items: flex-start;flex-direction: column;}
.job-info {width: 100%;padding-left: 0px;margin-top: 10px; justify-content: flex-start;}
.full-description {margin-top: 0px;}
.video-wrapper { margin-top: 0px; margin-bottom: 30px; height: auto; display: block;}
.video-box { right: 0px; width: 100%;  height: auto; padding: 5px; position: relative; top: 0px;}
.video-box video {width: 100%; height: 100%;}
.video-wrapper::after { display: none;}
.price-box { margin-top: 0px;margin-bottom: 25px;}
.contactus-wrapper {padding: 0px; box-shadow: none;}
.sub-heading { font-size: 22px; margin-bottom: 15px; font-weight: 800;}
.approach-steps span {font-size: 45px;line-height: 60px;}
.approach-steps::before { top: 30px;}
.qcode-difference-wrapper .sub-heading { margin-bottom: 15px;}
.heading-sec {padding: 20px 20px;}
.closeButton {right: 20px;top: 22px;}
.session-course-title {align-items: flex-start;flex-direction: column;}
.session-wrapper { padding: 20px 20px;}
.session-item-01 h2 {font-size: 20px;margin-bottom: 15px;}
.session-item-01 .card-header {padding: 12px 12px;}
.session-item-01 .card-header .card-link {font-size: 15px;}
.session-item-01 .card-header .card-link span img { width: 22px;}
.session-item-01 .card-header .card-link .card-text img {  margin-right: 10px;}
.session-item-01 .card-header .card-link .status { min-width: 95px; height: 28px;font-size: 12px;}
.custom-button-box {   flex-direction: column;}
.custom-button-box .button-2 + .button-2  { margin-top: 12px;}
.session-item-01 .card-body .btm-fullWidth { min-width: 140px; height: 38px; padding: 10px 20px;}
.session-item-01 .sub-card .card-header { padding: 6px 12px;}
.modal-body.request-modal { padding: 30px 20px;}
.content-wrap { flex-direction: column;}
.content-wrap h2 { margin-bottom: 15px;}
.modal-body.request-modal .btm-fullWidth {  width: 100%;}
.timing-zone ul.time-ul {  flex-wrap: wrap;}
.timing-zone ul.time-ul > li:first-child, .timing-zone ul.time-ul > li:nth-child(2) { width: 50%;  border-bottom: 1px solid #00838D; margin: 0px;}
.timing-zone ul.time-ul > li:first-child span, .timing-zone ul.time-ul > li:nth-child(2) span {display: inline-flex;margin-right: 5px;margin-bottom: 0px;}
.timing-zone ul.time-ul > li { width: 33.33%; flex-wrap: wrap;font-size: 13px;}
.timing-zone ul.time-ul > li:nth-child(3){ border-left: none;}
.timing-zone ul.time-ul > li:nth-child(2) .react-datepicker-popper { margin-top: 10px; right: 10px !important; left: auto !important;}
.react-datepicker-popper { transform: translate3d(0px, 42px, 0px) !important;}
.timing-zone ul.time-ul > li:nth-child(2) .react-datepicker::after, .timing-zone ul.time-ul > li:nth-child(2) .react-datepicker::before {left: auto;right: 115px !important;}
.react-datepicker {top: 0px;}
.timing-zone ul.time-ul > li span {display: flex;margin-right: 4px;margin-bottom: 0px;width: 15px;}
.timing-zone ul.time-ul > li > .time-label {top: 4px;left: 5px; font-size: 11px;width: auto; z-index: 99;}
.react-datepicker-wrapper input, .timing-zone ul.time-ul > li h3{font-size: 13px;}
.timing-zone ul.time-ul > li { padding: 10px 10px; margin: 0px; padding-top: 22px;justify-content: flex-start;}
.invite-item-01 .closeBox {top: 0px; right: 0px;font-size: 20px;height: 20px;}
.about-image{ display: none;}
.addrerss-wrap, .social-wrap{ padding-left: 0px;}
.height200 {height: 160px; margin-bottom: 10px;}
.faq-card .card-header a {font-size: 16px;padding-right: 30px; line-height: 20px;}
.faq-card .card-body p, .faq-card .card-body ul li { font-size: 14px;}
.custom-navbar .navbar-nav li:last-child, .custom-navbar .navbar-nav li:nth-last-of-type(2) {margin-left: 0px;}
.price-box {flex-direction: row;min-height: 130px;}
.priceWrap { align-items: flex-start;}
.offerWrap {width: 65px;height: 65px;font-size: 10px;line-height: 12px;}
.price-box h2 {font-size: 21px;text-align: left;}
.price-box h2 del {  font-size: 19px;}
.price-box p { font-size: 14px;}
.price-box > .offerWrap { margin-top: 0px;}
.carouselSlider {margin-top: 40px;}
.faq-heading h2 { font-size: 25px;line-height: 35px;}
.card.career-wrapper { padding: 20px 15px;}
.subject-heading h3 { font-size: 18px;}
.job-info ul li {font-size: 15px;}
.full-description {padding: 15px 0px !important;}
.career-wrapper p, .full-description ul li {font-size: 14px; line-height: 24px;}
.full-description h4 { font-size: 18px;}
.cart-item-lists { min-height: auto;}

.contact-form .success-massege { position: relative;height: 170px;}
.success-massege {position: absolute; height: 210px; display: flex;flex-direction: column; justify-content: center;}
.content-wrap span.error1 {text-align: center;}

.coupon-error {font-size: 12px;top: 15px;padding: 0px 0%;line-height: 16px;}
.sub-card .card-body {padding: 15px 15px;}
.sub-card .card-body .btn-group {margin-top: 15px;}

}

@media only screen and (min-width: 576px) and (max-width:767px) { 
.modal-bottom { padding: 40px 80px;}
.modal-bottom .form-control, .modal-bottom .form-control:focus, .modal-bottom .btn-login { height: 55px;}
.programming-1 {width: 48%; margin: 35px 0px; padding: 20px;}
.programming-1 h3 { font-size: 20px; line-height: 30px;height: 150px;}
.price-box { margin-top: 35px;}
.program-description {padding-bottom: 10px;}
.program-image { margin-top: 130px;}
.cart-details { margin-top: 0px; padding: 15px;}
.success-box h2 {font-size: 28px;line-height: 35px;}
.success-box p { font-size: 15px;}
.modal-body.enquiry-modal { padding: 30px 40px;}
.cms-page.text-center.mb-5 {margin-bottom: 40px !important;}
.career-wrapper {border-left-width: 7px; padding: 25px;}
.short-description {align-items: center;flex-direction: row;}
.content-wrap { flex-direction: row;}
.content-wrap h2 { margin-bottom: 0px;}
.modal-body.request-modal .btm-fullWidth {  width: auto;}
.timing-zone ul.time-ul {  flex-wrap: wrap;}
.timing-zone ul.time-ul > li, .timing-zone ul.time-ul > li:first-child, .timing-zone ul.time-ul > li:nth-child(2) { width: 20%;  border-bottom: none; margin:12px 0px; padding: 0px 10px;}
.timing-zone ul.time-ul > li:first-child span, .timing-zone ul.time-ul > li span {display: inline-flex;margin-right: 10px;margin-bottom: 0px;}
.timing-zone ul.time-ul > li:nth-child(3){ border-left:1px solid #00838D;}
.timing-zone ul.time-ul > li > .time-label {top: -20px;}
.custom-button-box {  flex-direction: row;}
.custom-button-box .button-2 + .button-2 { margin-top: 0px;}
.invite-item-01 .closeBox {top: 20px; right: 20px;font-size: 30px;height: 50px;}
.height200 {height: 90px;}
.program-image { margin-top: 25px;}
.price-box {margin-top: 0px;}
.course-image { height: 150px;}
.course-content {padding: 10px;}
.btn-learnmore {font-size: 14px;padding: 8px 10px;}
.course-content ul { margin-bottom: 30px;}
.job-info { width: 250px !important; padding-left: 15px;}
.job-info ul li + li { margin-left: 20px;}
.instructors-1 .instructors-bottom p { font-size: 15px;line-height: 20px;}
.content-wrap span.error1 {text-align: right;}

}