@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

body {font-family: 'Roboto', sans-serif; font-size: 1.4vw; height: 100%; overflow: auto;}
* {box-sizing: border-box; margin: 0; padding: 0;}


.bannerWrap {display: block; width: 100%; position: relative;}
.bannerWrap .banner {width: 100%;}
.bannerWrap .banner img {width: 100%;}
.bannerWrap .logo {position: absolute; top: 2vw; left: 6%; width: 28%;}
.bannerWrap .logo img {width: 100%;}

.bannerWrap .caption {position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; background: rgba(230, 0, 28, .5); padding: 4vw 6vw; color: #fff;}
.bannerWrap .caption.show {transform: translateY(-50%);}
.bannerWrap .caption h2 {font-size: 3vw;}
.bannerWrap .caption h3 {display: inline-block; font-size: 2vw; padding: 1vw 2vw; background: #fff; color: #e6001c; margin: 1vw 0; text-transform: uppercase;}
.bannerWrap .caption span {display: block; font-size: 1.26vw;}
.bannerWrap .caption h4 {font-size: 2vw; margin-left: 2vw;}
.bannerWrap .caption::before {content: ''; display: block; width: 20%; height: 100%; position: absolute; top: 0; left: calc(100%); background: url(../images/SkewBg.png) center no-repeat; background-size: 100% 100%; opacity: .5;}

.bannerWrap .heading {position: absolute; top: 4vw; right: 6%; width: 50%; text-align: right; z-index: 1; font-size: 3vw; color: #fff;}
.bannerWrap .heading span {font-size: 2vw; display: block;}
.bannerWrap .heading span a {color: inherit; text-decoration: none;}
.bannerWrap .form {/*position: absolute;*/ bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, .8); padding: 2vw 0;}
.bannerWrap .form .field {display: inline; width: calc(16% - 5px); vertical-align: top; padding: 0 1%;}
.bannerWrap .form .captcha_dii {display: inline; width: calc(16% - 5px); vertical-align: top; padding: 0 0;}
.bannerWrap .form .field input[type=text],.bannerWrap .form .field input[type=number], .bannerWrap .form .field input[type=submit], .bannerWrap .form .field select {display: block; width: 100%; height: 42px; border: 0; padding: 0 .8vw;font-size:16px;}
.bannerWrap .form .field input[type=submit] {background: #e6001c; color: #fff; text-transform: uppercase; cursor:pointer;}


.courseOffered {padding: 8vw 0;}
.courseOffered h2 {font-size: 2vw; margin-bottom: 4vw; text-align: center;}
.courseOffered ul {display: block;}
.courseOffered ul li {display: inline-block; border: 1px solid #717171; padding: 2vw; width: calc(32.33% - 4px - 2vw); vertical-align: top; margin: 0 1vw; border-radius: 12px; font-weight: 700; color: #2a2a2a; min-height: 12vw;}
.courseOffered ul li h4 {display: block; margin-bottom: 1vw;}
.courseOffered ul li span {display: block; color: #9d9d9d; font-size: 1vw; font-weight: 400;}
.courseOffered ul li p {font-size: 1vw; color: #616161; font-weight: 400;}

.highlights {padding: 8vw 0; color: #fff; background: url(../images/Banner2.jpg) center no-repeat; background-size: cover; position: relative;}
.highlights::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(230, 0, 28, .7); z-index: 0;}
.highlights h2 {font-size: 2vw; margin-bottom: 4vw; text-align: center; position: relative; z-index: 1;}
.highlights ul {display: block; position: relative; z-index: 1;}
.highlights ul li {display: inline-block; width: calc(33.33% - 4px - 2vw); vertical-align: top; margin: 0 1vw; border-radius: 12px; font-weight: 400; padding-bottom: .5vw; color: #2a2a2a; margin-bottom: 4vw; color: #fff; position: relative;}
.highlights ul li::before {content: ''; display: block; width: 20%; height: 2px; position: absolute; top: 100%; left: 0; background: #fff;}

.board {padding: 8vw 0;}
.board h2 {font-size: 2vw; margin-bottom: 4vw; text-align: center; position: relative; z-index: 1;}
.board ul {display: block;}
.board ul li {display: inline-block; width: calc(24% - 4px - 2vw); vertical-align: top; margin: 0 1vw; border-radius: 12px; font-weight: 700; color: #2a2a2a; min-height: 12vw;}
.board ul li:last-child {margin-bottom: 0;}
.board ul li .pic {display: block; margin-bottom: 1vw; position: relative; padding-bottom: 1vw;}
.board ul li .pic img {width: 100%; }
.board ul li .pic::before {content: ''; display: block; width: 20%; height: 2px; position: absolute; top: 100%; left: 0; background: #e6001c;}

.lifeAt {padding: 8vw 0;}
.lifeAt h2 {font-size: 2vw; margin-bottom: 4vw; text-align: center; position: relative; z-index: 1;}
.lifeAt ul {display: block;}
.lifeAt ul li {display: inline-block; vertical-align: top; border-radius: 12px; font-weight: 700; color: #2a2a2a; min-height: 12vw;}
.lifeAt ul li .pic {display: block; margin-bottom: 1vw; position: relative; padding-bottom: 1vw;}
.lifeAt ul li .pic img {width: 100%; }
.lifeAt ul li .pic::before {content: ''; display: block; width: 20%; height: 2px; position: absolute; bottom: 0%; left: 0; background: #e6001c;}
.lifeAt .bx-wrapper {border: 0; box-shadow: none; margin: 0;}
.lifeAt .bx-wrapper .bx-controls-direction a {width: 4vw; height: 8vw; margin-top: -4vw; /*background: rgba(255,255,255,.7);*/}
.lifeAt .bx-wrapper .bx-next {right: 0; background: rgba(255,255,255,.7) url(../images/Next.png) center no-repeat; background-size: 18px auto;}
.lifeAt .bx-wrapper .bx-prev {left: 0; background: rgba(255,255,255,.7) url(../images/Prev.png) center no-repeat; background-size: 18px auto;}

.successStories {padding: 8vw 0; background: #e6001c; color: #fff;}
.successStories h2 {font-size: 2vw; margin-bottom: 4vw; text-align: center; position: relative; z-index: 1;}
.successStories ul {display: block;}
.successStories ul li {display: inline-block; width: calc(24% - 4px - 2vw); vertical-align: top; margin: 0 1vw; border-radius: 12px; font-weight: 700; color: #000; min-height: 12vw;}
.successStories ul li:last-child {margin-bottom: 0;}
.successStories ul li .pic {display: block; margin-bottom: 1vw; position: relative; padding-bottom: 1vw;}
.successStories ul li .pic img {width: 100%; }
.successStories ul li .pic::before {content: ''; display: block; width: 20%; height: 2px; position: absolute; top: 100%; left: 0; background: #fff;}

footer {padding: 2vw; background: #242424; color: #cccccc; margin-bottom: 40px;}
footer h3 {font-size: 2vw; font-weight: 400; margin-bottom: 1vw;}
footer p {font-size: 1vw; font-weight: 400;}
footer p a {color: inherit; text-decoration: none;}

.anim {opacity: 0; transition: all ease-in-out .4s;}
.animLeftIn {transform: translateX(-50px);}
.animLeftIn.show {transform: translateX(0); opacity: 1;}
.animRightIn {transform: translateX(50px);}
.animRightIn.show {transform: translateX(0); opacity: 1;}
.animBottomIn {transform: translateY(50px);}
.animBottomIn.show {transform: translateY(0); opacity: 1;}
.animTopIn {transform: translateY(-50px);}
.animTopIn.show {transform: translateY(0); opacity: 1;}
.animFadeIn.show {opacity: 1;}

.callWhatsapp {display: none; width: 100%; background: #3c3c3c; color: #fff; position: fixed; bottom: 0; left: 0; z-index: 2;}
.callWhatsapp span {display: flex; width: 50%;}
.callWhatsapp span:first-child {border-right: 1px solid #7f7f7f;}
.callWhatsapp span a {display: block;padding: 12px 20px; text-align: center; width: 100%; color: inherit; text-decoration: none; font-size: 14px;}
.callWhatsapp span a img {display: inline-block; vertical-align: middle; margin-right: 4px; height: 20px;}
#ebcaptchatext {font-size:20px;margin-top:10px;}
label#ebcaptchatext { padding: 0px 2px 2px 13px;}

.reg_hed h2 {background-color:red; color:#fff;padding:10px;text-align:center;}

.musics_about h2 {color:#fff;margin-bottom:15px;text-align:center;}
.musics_about p {color:#fff;font-size:18px;line-height:30px;text-align:justify;}