/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. global styles
03. header
05. banner
05. Slider Style
06. Slick Slider Css Ruls
07. about
08. what ielts
09. class
10. teachers
11. students
12. reservation
13. footer
14. go top
15. lazy load youtube
16. responsive

/* ------reset------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption { margin: 0; padding: 0; border: 0; outline: 0;}
html[xmlns] .clearfix { display: block;}
* html .clearfix { height: 1%;}
* { box-sizing: border-box;}
ul, li { padding: 0; margin: 0; list-style: none;}
header, nav, section, article, aside, footer, hgroup { display: block;}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix { display: inline-block;}
html, body {
  font-family: "Microsoft JhengHei","微軟正黑體", Arial; font-weight: 400; font-size: 16px; background-color: #fff; color: #2a2a2a;
  -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.7;
}
a { text-decoration: none !important; letter-spacing: 1px;}
h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; letter-spacing: 1px;}
p { letter-spacing: 1px; color: #2a2a2a;}
img { width: 100%; height: auto; }
.list-group-numbered > li::before{ margin-right: 5px;}

/* ----- global styles ------*/
html,body { background: #fff;}
::selection { background: #e64848; color: #fff;}
::-moz-selection { background: #e64848; color: #fff;}

.heading-tabs{ margin-top: 40px;}
.heading-tabs ul { padding: 0; font-size: 0;}
.heading-tabs ul li { display: inline-block; padding: 5px 20px; background: #eee; font-size: 16px;}
.heading-tabs ul li:last-child { margin-right: 0px;}
.heading-tabs ul li:first-child { margin-left: 0px;}
.heading-tabs ul li a {
  display: inline-block; width: 100%; text-transform: capitalize;
  color: #736e6e; font-weight: 600; transition: all 0.3s; text-align: center;
}
.heading-tabs ul li i{color: #737070; }
.heading-tabs ul li a img { display: block; margin: 0 auto 15px auto;}
.heading-tabs ul .ui-tabs-active{ background: #e64848; color: #fff;}
.heading-tabs ul .ui-tabs-active a { color: #fff; position: relative;}

table.table-striped tbody tr:nth-child(even) td{ background: #f8f8f8;}
.table-style1 thead{ background: #424242; color: #fff;}
.table-style1 thead th{ padding: 8px;}
.table-style1 th,.table-style1 td{ padding: 8px; border: 1px solid #aaa; text-align: center;}
.table-style2 th,.table-style2 td{ padding: 8px; border: 1px solid #aaa; text-align: center;}
.table-style2 td{ background: #fff;}
.table-style2 tbody th{ background:#424242; color: #fff;}
a.link{ position: relative; color:#e64848; width: auto;}
a.link:hover:after{ content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background:#e64848;}


@media (min-width: 1400px){
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1100px;}
}

@media (max-width: 991px) {
  html, body { overflow-x: hidden; }
  .mobile-top-fix { margin-top: 30px; margin-bottom: 0px; }
  .mobile-bottom-fix { margin-bottom: 30px;}
  .mobile-bottom-fix-big { margin-bottom: 60px; }
}
@media (max-width:768px) {
  .table-style2{ width: 100%; min-width: 800px;}
}
/* ----- button style ------*/
.main-white-button a {
  display: inline-block; padding: 6px 15px; background-color: #fff; border: solid 1px #e64848;
  border-radius: 8px; transition: all .3s; font-size: 14px; font-weight: 600; color: #e64848;
}
.main-white-button a:hover { background-color: #e64848; color: #fff;}
.main-text-button a {
  padding: 5px 10px; background: #e64848; border-radius: 8px; font-size: 13px; color: #fff; font-weight: 600; transition: all .3s;
}
.main-text-button a:hover { opacity: 0.9;}
.white-line-button a {
  display: inline-block; padding: 6px 15px;border: solid 1px #fff;
  border-radius: 8px; transition: all .3s; font-size: 13px; font-weight: 600; color: #fff;
}
.white-line-button a:hover { background-color: #fff; color: #e64848;}
.button-s a{ padding: 2px 10px;}

/* ----- index-page commom style ------*/
#index-page .section-heading { margin-bottom: 15px;}
.bg-red-light{ background: #fff8f8;}

.section-heading h1,.section-heading h2 { margin-bottom: 20px; font-size: 36px; font-weight: 900; color: #e64848; line-height: 40px;}
#index-page h3{ position: relative; display: inline-block; font-size: 19px; color: #666;}
#index-page h3:before{ content: ''; position: absolute; top: 10px; left: -45px; width: 30px; height: 1px; background: #999;}
#index-page h3:after{ content: ''; position: absolute; top: 10px; right: -45px; width: 30px; height: 1px; background: #999;}

@media (max-width: 580px) {
  #index-page h3:before,#index-page h3:after{ display: none;}  
}
@media (max-width: 414px) {
  .section-heading h1{ font-size: 28px;}
  .section-heading h2, .section-heading h3 { font-size: 24px;}
}


/* ------ header ------*/
.top-bar{ display: flex; padding: 4px 0; background: #e64848; font-size: 12px;}
.top-bar ul{ display: flex; justify-content:flex-end; }
.top-bar li a{ padding: 0 8px; color: #fff;}
.top-bar ul li:not(:first-child) a { border-left: solid 1px rgb(255, 255, 255,.5);}

.background-header {
  position: fixed!important; top: 0px; left: 0px; right: 0px;
  background-color: #fff; height: 80px!important; box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}
.background-header .logo,.background-header .main-nav .nav li a { color: #1e1e1e!important;}
.background-header .main-nav .nav li:hover a { color: #e64848!important;}
.background-header .nav li a.active { color: #e64848!important;}

.header-area {
  background-color: #fff; z-index: 100; box-shadow: 0 0 8px rgba( 0,0,0,0.3 );
  position: absolute; top: 0px; left: 0px; right: 0px; height: 100px;
  -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; transition: all .5s ease 0s;
}
.header-area .main-nav { background: transparent;  line-height: 1.5;}
.header-area .main-nav .logo { float: left;
  -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
}
.header-area .main-nav .logo  img { width: 100%; max-width: 240px; min-width: 240px; margin: 12px 0px;}
.background-header .main-nav { min-height: 55px;}  

.background-header .nav { margin-top: 10px !important;}
.header-area .main-nav .nav {
  float: right; margin-top: 20px; margin-right: 0px; background-color: transparent; position: relative; z-index: 999;
  -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
}

.header-area .main-nav .nav li { padding-left: 15px; padding-right: 15px; background: #fff;}
.header-area .main-nav .nav li:last-child { padding-right: 0px;}
.header-area .main-nav .nav li a {
  display: inline-block; height: 40px; border: transparent; max-width: 300px;
  font-weight: 600; font-size: 15px; color: #2f2d2d; line-height: 40px; letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
}
.header-area .main-nav .nav li a { color: #2f2d2d;}
.header-area .main-nav .nav li:hover a,.header-area .main-nav .nav li a.active { color: #e64848!important;}
.background-header .main-nav .nav li:hover a,.background-header .main-nav .nav li a.active { color: #e64848!important; opacity: 1;}

.header-area .main-nav .nav li.submenu { position: relative; padding-right: 30px;}
.header-area .main-nav .nav li.submenu:after {
  position: absolute; right: 18px; top: 12px; content: "\f107";
  font-size: 12px; font-family:"Font Awesome 5 Free"; font-display: swap; font-weight: 900; -webkit-font-smoothing: antialiased;
}
.background-header .main-nav .nav li.submenu:after { color: #a9a4a4;}
.header-area .main-nav .nav li.submenu ul {
  position: absolute; top: 50px; width:150px; overflow: hidden; right: 0;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.07); opacity: 0;
  transform: translateY(+2em); visibility: hidden; z-index: -1; vertical-align: top;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.header-area .main-nav .nav li.submenu ul li { margin-left: 0px; padding-left: 0px; padding-right: 0px;}
.header-area .main-nav .nav li.submenu ul li a {
  position: relative; display: inline-block; width: 100%; height: 40px; 
  background: rgba( 255,255,255,0.9 ); opacity: 1; text-align: center;
  -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
  font-size: 14px; font-weight: 400; line-height: 40px; color: #2f2d2d!important;
}
.header-area .main-nav .nav li.submenu ul li a:hover { background: rgba(230, 72, 72, 0.9); color: #fff!important;}
.header-area .main-nav .nav li.submenu ul li a:hover:before { width: 3px;}
.header-area .main-nav .nav li.submenu:hover ul { visibility: visible; opacity: 1; z-index: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3s;}
.header-area .main-nav .menu-trigger {
  cursor: pointer; width: 32px; height: 40px; display: block; position: absolute; top: 45px; right: 20px;
  text-indent: -9999em; z-index: 99; display: none;
}
.background-header .main-nav .menu-trigger { top: 23px;}
.header-area .main-nav .nav li.submenu ul.active li a{ max-width: 100%;}
.header-area .main-nav .menu-trigger span,.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s;
  display: block; position: absolute; width: 30px; height: 2px; right: 0; background-color: #2f2d2d;
}
.background-header .main-nav .menu-trigger span,.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after { background-color: #555;}

.header-area .main-nav .menu-trigger span:before,.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s;
  display: block; position: absolute; right: 0; width: 30px; height: 2px; width: 75%; background-color: #555;
}

.background-header .main-nav .menu-trigger span:before,.background-header .main-nav .menu-trigger span:after { background-color: #2a2a2a;}

.header-area .main-nav .menu-trigger span:before,.header-area .main-nav .menu-trigger span:after { content: ""; background-color: #2a2a2a;}
.header-area .main-nav .menu-trigger span { top: 16px; background-color: #2a2a2a}
.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%; -ms-transform-origin: 33% 100%; -webkit-transform-origin: 33% 100%; transform-origin: 33% 100%;
  top: -10px; z-index: 10; background-color: #2a2a2a;
}
.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0; -ms-transform-origin: 33% 0; -webkit-transform-origin: 33% 0; transform-origin: 33% 0;
  top: 10px; background-color: #2a2a2a;
}
.header-area .main-nav .menu-trigger.active span,.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after { background-color: transparent; width: 100%;}
.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg); -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg); transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #2f2d2d;
}
.background-header .main-nav .menu-trigger.active span:before { background-color: #2f2d2d;}
.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg); -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg); transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #2f2d2d;
}
.background-header .main-nav .menu-trigger.active span:after { background-color: #2f2d2d;}
.header-area.header-sticky { min-height: 90px;}
.header-area .nav { margin-top: 30px;}
.header-area.header-sticky .nav li a.active { color: #e64848;}
.header-area.background-header .logo img {max-width: 200px;min-width: 200px;}
.background-header .main-nav{ min-height: 55px;}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li { padding-left: 12px; padding-right: 12px;}
  .header-area .main-nav:before { display: none;}
}

@media (max-width: 767px) {
  .header-area .main-nav .logo { color: #2f2d2d; }
  .header-area.header-sticky .logo img{ min-width: 180px;}
  .background-header .main-nav .menu-trigger { top: 40px;}
  .header-area.header-sticky .nav li a:hover,.header-area.header-sticky .nav li a.active {
    color: #e64848!important; opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a { width: 100%;}
  .header-area.header-sticky { min-height: 90px;}
  .header-area { height: 100px; text-align: center;}
  .header-area .container { padding: 0px;}
  .header-area.header-sticky .container { max-width: 100%;}
  .header-area .logo { margin-left:20px;}
  .header-area .menu-trigger { display: block !important;}
  .header-area .main-nav { overflow: hidden;}
  .header-area .main-nav .nav {
    float: none; width: 100%; display: none; margin-left: 0px;
    -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s; transition: all 0s ease 0s;
  }
  .header-area .main-nav .nav li:first-child { display: inline-block; border-top: 1px solid #ddd; }
  .header-area.header-sticky .nav { margin-top: 62px !important;}
  .header-area .main-nav .nav li { width: 100%; vertical-align: top; border-bottom: 1px solid #eee; padding-left: 0px !important; padding-right: 0px !important;}
  .header-area .main-nav .nav li a {
    height: 50px !important; padding: 0px !important; border: none !important; background: #fff;
    color: #191a20 !important; line-height: 50px !important;
  }
  .header-area .main-nav .nav li a:hover { color: #e64848!important;}
  .header-area .main-nav .nav li.submenu ul {
    position: relative; top: 0px; width: 100%; height: 0px; visibility: inherit; opacity: 1; z-index: 1; box-shadow: none;
    transform: translateY(0%); transition-delay: 0s, 0s, 0.3s;
  }
  .header-area .main-nav .nav li.submenu ul li a { width: 100%; background: rgba( 255,255,255,0.95 ); font-size: 15px; font-weight: 400;}
  .header-area .main-nav .nav li.submenu ul li a:hover { color: #fff!important; background:rgba(230, 72, 72, 0.9)!important;}
  .header-area .main-nav .nav li.submenu ul li a:hover:before { width: 0px;}
  .header-area .main-nav .nav li.submenu ul.active { height: auto !important;}
  .header-area .main-nav .nav li.submenu:after { right: 25px; top: 15px; font-size: 14px;}
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul { height: 0px;}
}

@media (min-width: 767px) {
  .header-area .main-nav .nav { display: flex !important; }
  .header-area .main-nav .nav li.submenu ul li a{ max-width: 100%;}
}

@media (max-width:414px) {
  .header-area.header-sticky .nav { margin-top: 62px!important;}
  .header-area .logo { margin-left: 10px;}
  .header-area.header-sticky .logo img { max-width: 200px; padding: 4px 0;}
  .header-area.background-header .logo img{ padding: 5px 0;}
}
/* ------- banner -------*/
#pgtop { padding-top: 100px;}
#pgtop .col-lg-4,#pgtop .col-lg-8 { padding: 0px;}
#pgtop .left-content {
  background: url(../images/top-left-bg.jpg) center center no-repeat; background-size: cover;
  position: relative; width: 100%; height: 100%;
}
#pgtop .left-content .inner-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#pgtop .left-content h4 { font-family: 'Dancing Script', cursive; color: #fff; font-size: 54px; font-weight: 700;}
#pgtop .left-content h6 { margin-top: 5px; font-size: 15px; text-transform: uppercase; font-weight: 600; color: #fff; letter-spacing: 3px;}
#pgtop .left-content .main-white-button  { margin-top: 25px; margin-bottom: 10px;}
#pgtop .left-content .main-white-button a { display: inline-block;}

/* ==== Slider Style === */
.img-fill{ width: 100%; display: block; overflow: hidden; position: relative; text-align: center}
.img-fill img { position: relative; min-height: 100%; min-width: 100%; display: inline-block; max-width: none;}

*,*:before,*:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.Grid1k { padding: 0 15px; max-width: 1200px;  margin: auto;}
.blocks-box,.slick-slider { margin: 0; padding: 0!important;}
.slick-slide { float: left /* If RTL Make This Right */ ; padding: 0;}
.Modern-Slider > .slick-slide:not(:first-child) { display: none;}
.Modern-Slider > .slick-slide:first-child { padding: 0 20px;}
.Modern-Slider .item .img-fill{ height:100%; max-height: 700px; background:#000;}
.Modern-Slider .item .info > div{ display:inline-block!important; vertical-align:middle;}
.Modern-Slider .NextArrow {
  position:absolute; bottom:0%; right:20px; width: 80px; height: 40px;
  transform: translateY(-25px); background-color: #e64848; border:0 none;
  line-height: 40px; text-align:center; font-size: 30px; color:#FFF;
  z-index:5; outline: none; opacity: 0.6; transition: all .3s;
}
.Modern-Slider .NextArrow:hover { opacity: 1;}
.Modern-Slider .NextArrow:before{ font-family:'Font Awesome 5 Free'; font-display: swap; content:'\f105';font-weight: 900;}
.Modern-Slider .PrevArrow {
  position:absolute; bottom:0%; right:110px; width: 80px; height: 40px; 
  transform: translateY(-25px); background-color: #e64848; border:0 none;
  line-height: 40px; text-align:center; font-size: 30px; color:#FFF;
  z-index:5; outline: none; opacity: 0.6; transition: all .3s;
}

.Modern-Slider .PrevArrow:hover { opacity: 1;}
.Modern-Slider .PrevArrow:before{ font-family:'Font Awesome 5 Free'; font-display: swap; content:'\f104';font-weight: 900;}

ul.slick-dots { position: absolute; bottom: 20px; width: 100%; height: 28px; margin: 0 auto; text-align: center;}
ul.slick-dots li{ display: inline-block; border-radius: 50%; padding: 0 5px;}
ul.slick-dots button{ background: rgb(0 0 0 / 30%); width: 14px; height: 14px; padding: 4px; border-radius: 100%; border: none; font-size: 0; opacity: .7;}
ul.slick-dots button:active{ border: none;}
ul.slick-dots .slick-active button{ background: #e64848; opacity: 1;}
.Modern-Slider .item.slick-active{ animation:Slick-FastSwipeIn 1s both;}
.Modern-Slider .buttons { position: relative;}
.Modern-Slider { background:#000;}

/* ==== Slick Slider Css Ruls === */
.slick-slider{ position:relative; display:block;- webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{ position:relative; display:block; overflow:hidden; margin:0; padding:0;}
.slick-list:focus{ outline:none;}
.slick-list.dragging{ cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{ -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
.slick-track{ position:relative; top:0; left:0; display:block;}
.slick-track:before,.slick-track:after{ display:table; content:''}
.slick-track:after{ clear:both;}
.slick-loading .slick-track{ visibility:hidden;}
.slick-slide{ display:none; float:left /* If RTL Make This Right */ ; height:100%; min-height:1px;}
.slick-slide.dragging img{ pointer-events:none;}
.slick-initialized .slick-slide{ display:block; width: 100%;}
.slick-loading .slick-slide { visibility:hidden;}
.slick-vertical .slick-slide { display:block; height:auto; border:1px solid transparent;}
.slick-track{ display: flex !important; align-items: center; justify-content: center;}
.slick-slide{ display: flex!important; height: inherit !important;}
.slick-slide img { object-fit: cover; /* be aware that this doesn't work on IE */ height: 100%; width: 100%;}

.img-fill img.mobile-show { display: none;}
.img-fill img.pc-show { display:block;}

@media screen and (max-width: 768px){
  .img-fill img.mobile-show { display: block;}
  .img-fill img.pc-show { display:none;}
}
@media screen and (max-width: 580px){
  #top .container-fluid{ padding: 0;}
  .slick-initialized .slick-slide{ height: auto!important;}
  .slick-track{ height: auto;}
}

/*------ about ------*/
.section{ padding: 70px 0;}
#about { position: relative; min-height: 490px;}
#about .section-heading h2 { padding-right: 120px;}
#about img { width: 100%; min-height: 50px; overflow: hidden;}
#about p { margin-bottom: 25px;}

/*------ what ielts ------*/
#what-ielts .heading-tabs .main-dark-button { text-align: right;}
#what-ielts .tabs-content { max-width: 960px; margin: 40px auto 0; transition: all 0.3s; text-align: left;}
#what-ielts .tabs-content .tab-item { position: relative; overflow: hidden;}
#what-ielts .tabs-content img { width: 100%; border-radius: 5px;}
#class .s-title span{ display: block; padding-bottom: 10px; margin:10px 0; border-bottom: solid 1px #1e1e1e;}
#what-ielts .ui-tabs-anchor i{ padding-right: 5px; margin: 0 auto; vertical-align: sub; font-size: 24px; color: #2a2a2a;}

@media (max-width: 580px) {
  #tabs ul li{ margin-bottom: 10px;}
  #what-ielts .tabs-content{ text-align: center;}
  #what-ielts .tabs-content img{ margin-bottom: 15px;}
}

/*----- class -------*/
#class{ min-height: 550px;}
#class .section-heading h6 { padding-left: 0px;}
#class .section-heading h6:before { display: none;}
#class  i { color: #dc3545; }
#class .s-title i{ background: #ffdbdb; border-radius: 50%; padding: 20px; border: solid 5px #ffcccc; font-size: 2rem; color: #dc3545;}
#class .s-title span{ display: block; padding-bottom: 10px; margin:10px 0; border-bottom: solid 1px #1e1e1e; font-size: 1.125rem;}
#class .s-title h2{ display: inline-block; padding-bottom: 10px; margin:10px 0; border-bottom: solid 1px #1e1e1e;}
#class .list{ margin-top: 40px;}
#class .s-content{ margin-bottom: 20px;}

@media (max-width: 750px) {
  #class .s-content { margin-bottom: 20px;}
  #class .s-title span{ display: block;}
}
/*------ teachers ------*/

.card {
  margin: 0 auto; max-width: 100%; min-height: 282px; border-radius: 5px;
  overflow: hidden; background-size: cover; background-repeat: no-repeat;
}
.card1 { background-image: url(../images/teachers-item-01.jpg);}
.card2 { background-image: url(../images/teachers-item-02.jpg);}
.card3 { background-image: url(../images/teachers-item-03.jpg);}
.card4 { background-image: url(../images/teachers-item-04.jpg);}
.card5 { background-image: url(../images/teachers-item-05.jpg);}
.card6 { background-image: url(../images/teachers-item-06.jpg);}
#teachers .info { position: absolute; bottom: -50%; width: 100%; min-height: 200px; background-color:rgba( 0,0,0,0.5 ); transition: all .3s;}
#teachers .card:hover .info,#teachers .card:hover .info:before { bottom: 0; min-height: 200px; transition: all .3s;}
#teachers .title { margin: 0; padding: 20px; font-size: 16px; font-weight: 700; color: #fff;}
#teachers .description { padding: 0px 20px; font-size: 14px; color: #fff;}
#teachers .price h6 {
  position: absolute; width: 70px; height: 70px; background-color: #e64848; border-radius: 3px;
  font-size: 20px; font-weight: 700; color: #fff; text-align: center; line-height: 70px;
}
#teachers .card .main-text-button { margin-left: 20px; margin-top: 15px; padding-bottom: 30px;}
.teachers-item-carousel{ margin-top: 40px;}
#teachers .owl-teachers-item { position: relative;}
.owl-nav { position: absolute; width: 100%; bottom: 55%; transform: translateY(5px); text-align: center;}
.owl-carousel .owl-nav button.owl-next{ position: absolute; right:-25px; margin-left: 0;}
.owl-carousel .owl-nav button.owl-prev{ position: absolute; left:-20px;}

.owl-dots { display: none;}
.owl-nav .owl-prev{outline: none;}
.owl-nav .owl-prev span,.owl-nav .owl-next span { opacity: 0;}
.owl-nav .owl-prev:before { display: inline-block; content: '\f104'; font-family: "Font Awesome 5 Free"; font-display: swap;; font-size: 25px; font-weight: 700; color: #e64848}

.owl-nav .owl-prev,.owl-nav .owl-next { opacity: 0.75; transition: all .5s;}
.owl-nav .owl-prev:hover,.owl-nav .owl-next:hover { opacity: 1;}
.owl-nav .owl-next{ margin-left: 10px; outline: none;}
.owl-nav .owl-next:before {
  display: inline-block; content: '\f105';
  font-family: "Font Awesome 5 Free"; font-display: swap; color: #e64848; font-size: 25px; font-weight: 700;
}

@media (max-width: 580px) {
  .card{ max-width: 240px; min-height: 290px;}
  .owl-carousel .owl-nav button.owl-prev { left: 35px;}
  .owl-carousel .owl-nav button.owl-next { right: 30px; margin-left: 0;}  
  #students .owl-carousel .owl-nav button.owl-prev { left: 10px;}
  #students .owl-carousel .owl-nav button.owl-next { right: -20px;}
}

/*----- students -----*/
#students .section-heading h6 { padding-left: 0px;}
#students .section-heading h6:before { display: none;}
#students .owl-carousel .owl-stage-outer{ margin-top: 40px;}
#students .item { max-width: 300px; width: 100%; padding: 10px; margin: 0 auto;
  border: 1px solid #e0e0e0; border-radius: 5px; text-align: center; transition: all .5s;
}
#students .item:hover { border-color: #e64848;}
#students .item:hover .down-content h4 { color: #e64848;}
#students .down-content strong{ background: #ffeeee;}

#students .item .thumb { position: relative;}
#students .item .thumb img { position: relative; width: 100%; overflow: hidden;}
#students .item .thumb .overlay {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  background-color: rgb(236 48 48 / 50%);; border-radius: 3px; z-index: 1;
  opacity: 0; visibility: hidden; transition: all .3s;
}
#students .item .thumb ul.more-icons {
  position: absolute; top: 50%; left: 50%; width: 100%; z-index: 11;
  transform: translate(-50%, -50%); transition: all .5s; opacity: 0; visibility: hidden;
}

#students .item .thumb ul.more-icons li { display: inline-block; margin: 0px 5px;}
#students .item .thumb ul.more-icons li a {
  display: inline-block; width: 40px; height: 40px; background-color: #fff; border-radius: 50%;
  text-align: center; line-height: 40px; color: #2a2a2a; transition: all .5s;
}
#students .item .thumb ul.more-icons li a:hover { background-color: #e64848;}
#students .item:hover .overlay { opacity: .9; visibility: visible;}
#students .item:hover ul.more-icons { opacity: 1; visibility: visible;}
#students .item .down-content { padding: 20px 0px;}
#students .item .down-content h4 { margin-bottom: 10px; padding-bottom: 10px; border-bottom: dashed 1px #e0e0e0; font-size: 20px; font-weight: 700; color: #2a2a2a; transition: all .3s;}
#students .item .down-content span { font-size: 14px; color: #2a2a2a;}
#students .owl-carousel .owl-stage-outer { margin: 40px 0 auto;}
#students button.owl-next{ position: absolute; right:-30px; margin-left: 0;}
#students button.owl-prev{ position: absolute; left:0px;}
/* ----- reservation -----*/

#reservation .section-heading { margin-bottom: 30px;}
#reservation .section-heading p { position: relative; padding-left: 40px;  margin-bottom: 0;background:none; font-size: 16px; font-weight: 500; line-height: 1.6; color: #666;
  letter-spacing: 2px; text-transform: uppercase; color: #fff;}
#reservation .section-heading span { display: block; font-size: 36px; color: #fff; font-weight: 700;}
#reservation .section-heading p:before { content: ''; position: absolute; left: 0; top: 8px; width: 30px; height: 1px; background-color: #777}
#reservation p { color: #fff; margin-bottom: 30px;}
#reservation { padding: 120px 0px;   
  background: url(../images/reservation-bg.jpg) center center no-repeat; background-size: cover; background-attachment: fixed;
}
#reservation .consult { display: inline-block; width: 100%; padding: 10px 20px; background: #2a2a2a; opacity: .9; border-radius: 10px; text-align: center; color: #fff;  transition: all .3s;}
#reservation .consult i{ display: inline-block; margin-right: 10px; font-size: 30px; color: #fff; vertical-align: bottom;}
#reservation .consult:hover{ opacity: 1;}

.contact-form form{ padding: 45px 30px; background-color: #fff; border-radius: 5px;}
.contact-form h4 { margin-bottom: 30px; font-weight: 700; font-size: 30px; color: #2a2a2a; text-align: center; }
#reservation .checkbox-area{ margin-bottom:20px; font-size: 13px; color: #333; text-align: center;}

.contact-form input,.contact-form textarea,.contact-form select {
  width: 100%; height: 46px; padding-top: 3px; padding-left: 20px; padding-right: 20px; margin-bottom: 15px;
  border-radius: 5px; outline: none; border: 1px solid #ddd; background-color: #fff;
  color: #2a2a2a; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.contact-form input[type=checkbox]{ position: relative; width: 18px; height: 18px; padding: 5px;
  background: #eee; border-radius: 100px; border: solid 1px #ddd; vertical-align: text-top;
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus { border-color: #e64848;}
.contact-form input[type="checkbox"]:checked:before{ position: absolute; top:2px; left: 2px; content: ""; width: 12px; height: 12px; background: #e64848; border-radius: 100px;}

.contact-form button {
  display: inline-block; width: 100%; margin-top: -10px; padding: 12px 25px;
  color: #fff; font-weight: 600;background-color: #e64848; box-shadow: none; 
  border: none; border-radius: 3px; transition: all .3s;
}
.contact-form button:hover { opacity: .9;}
.contact-form textarea { padding: 20px; height: 150px; resize: none;}
.contact-form ::-webkit-input-placeholder { /* Edge */ color: #a8a8a8;}
.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #a8a8a8;}
.contact-form ::placeholder { color: #a8a8a8;}
@media (max-width: 994px) {
  #reservation .consult{  margin-bottom: 20px; }
}
@media (max-width: 580px) {
  #students .item{  max-width:300px;  margin: 0 auto 30px auto; }
}
@media (max-width: 414px){
  .contact-form input[type=checkbox]{ margin: 0 2px 0 0px; vertical-align: top;}
  #reservation .checkbox-area { padding: 0; text-align: left;}
  #reservation .checkbox-area label{ width: 91%; line-height: 1.5;}
}
/* ----- footer -----*/
footer { padding: 50px 0px; background-color: #4e4e4e; color: #fff;}
footer p.s-title{ margin-bottom: 15px; font-size: 17px; line-height: 1; color: #fff;}
footer .social-icons p { margin-right: 15px; font-size: 13px; text-transform: uppercase;}
footer .logo { text-align: center;}
.footer-link,.footer-address{ display: inline-block; margin: 0 0 25px; font-size: 0;}
.footer-link li{ display: inline-block; margin-right: 10px;}
.footer-link a,.footer-address a{ font-size: 15px; line-height:2; color: #ccc;}
.footer-link a:hover{ color: #fff;}
footer .social-icons{ padding: 0; text-align: right;}

footer .social-icons ul li { display: inline-block;}
footer .social-icons li:not(:first-child) { margin-left: 10px;}
footer .social-icons ul li a {
  display: inline-block; height: 44px; width: 44px; text-align: center;
  font-size: 20px; color: #555; line-height: 44px; background-color: #ddd; border-radius: 50%;
  -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
}
footer .social-icons li svg{ fill: #555; width: 18px; height: 18px; vertical-align: inherit;}
.footer-menu .footer-link li a{ margin-right: 10px}
footer .social-icons ul li a:hover { color: #e64848;}
footer .social-icons li a:hover svg{ fill: #e64848;}

.related-link a{ margin-right: 10px;  font-size: 12px; color: #fff;}
.related-link a:not(:first-child){ padding-left: 10px; border-left: solid 1px #fff;}
.footer-related{ border-top: 1px solid #888; padding-top: 20px; font-size: 12px; color: #fff;}
.copyright{ margin-top: 10px; line-height: 1.5; color: #fff;}
@media (max-width: 960px) {
  footer .social-icons { padding: 15px 0 30px 10px; text-align: left;}
}

/* --go top ----*/
#go-top{ display: none; position:fixed; right:25px; bottom: 12%; width: 44px; height: 44px; padding: 10px; z-index: 999;
  background: rgba(230, 72,72, 0.8); text-align: center;-webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;}
#go-top i{ font-size: 24px; color: #fff;}

/* --lazy load youtube ----*/
.yt-wrapper { max-width: 720px; margin: 60px auto; padding: 0 20px;}
.youtube { background-color: #000; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer;}
.youtube img { width: 100%; top: -16.82%; left: 0; opacity: 0.7;}
.youtube .play-button { width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px;}
.youtube .play-button:before { content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff;}
.youtube img,.youtube .play-button { cursor: pointer;}
.youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before { position: absolute;}
.youtube .play-button,.youtube .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 );}
.youtube iframe { top: 0; left: 0; width: 100%; height: 100%;}

/* ------ responsive -----*/
@media (max-width: 992px) {
  #top { padding-top: 100px; height: auto;}
  .header-area .main-nav .nav li.submenu:after { right: 10px;}
  .header-area .main-nav .nav li.submenu { padding-right: 25px;}
  .header-area .main-nav .nav li { padding-right: 5px; padding-left: 5px;}
  .header-area .main-nav .nav li a { font-size: 15px; letter-spacing: 0px;}
  #top .left-content { padding: 25% 0px; text-align: center;}
  #about .right-content { margin-left: 0px; margin-top: 30px;}
  #students .students-item { margin-bottom: 30px;}
  #reservation .phone { margin-bottom: 60px;}
  #contact { margin-left: 0px; margin-top: 30px;}
  #class .tabs-content .left-list { margin-right: 0px;}
  #class .tabs-content .right-list { margin-left: 0px;}
  footer .right-text-content { margin-bottom: 30px; text-align: center;}
  footer .left-text-content p { margin-top: 30px; text-align: center;}
}

#preloader {
  overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99999;
  color: #fff; background-color: #e64848;
}
#preloader .jumper { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  margin: auto; width: 50px; height: 50px;
}

#preloader .jumper > div {
  position: absolute; width: 10px; height: 10px;background-color: #fff; opacity: 0; width: 50px; height: 50px;
  border-radius: 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both;
  -webkit-animation: jumper 1s 0s linear infinite; animation: jumper 1s 0s linear infinite;
}
#preloader .jumper > div:nth-child(2) { -webkit-animation-delay: 0.33333s; animation-delay: 0.33333s;}
#preloader .jumper > div:nth-child(3) { -webkit-animation-delay: 0.66666s; animation-delay: 0.66666s;}

@-webkit-keyframes jumper {
  0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
  5% { opacity: 1;}
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0;}
}

@keyframes jumper {
  0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
  5% { opacity: 1;}
  100% { opacity: 0;}
}

@media (max-width: 580px) {
  #index-page h3:before,#index-page h3:after{ display: none;}  
  #what-ielts #tabs ul li{ margin-bottom: 10px;}
  #what-ielts .tabs-content{ text-align: center;}
  #what-ielts .tabs-content img{ margin-bottom: 15px;}
}

@media (max-width: 580px) {
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  padding-right: var(--bs-gutter-x,1rem); padding-left: var(--bs-gutter-x,1rem);}
  .section-heading h2,.section-heading h3{ font-size: 28px;}
}

/* right fix bar */
.bottom_bar { position: fixed; right: 15px; top: 45%; z-index: 999;}
.bottom_bar ul{ width: 100%; padding: 5px 8px; background: #fff; border: solid 1px #ddd; border-radius: 8px; list-style-type: none; text-align: center;}
.bottom_bar li{ display: block; }
.bottom_bar li:not(:last-child) { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee;}
.bottom_bar li:nth-child(3){ border-bottom:none; padding-bottom: 5px; margin-bottom: 0;}
.bottom_bar svg{ display: block; margin:4px auto 0;}
.bottom_bar a:hover { text-decoration: none}
.bottom_bar a p{ margin-bottom: 0; font-size: 12px; line-height: 2; color: #d2152a;}
.bottom_bar .phone{ display: none;}
@media screen and (max-width: 768px){
	.bottom_bar { position: fixed; width: 100%; top: initial; bottom: 0; right: 0; z-index: 999;}
	.bottom_bar ul { display: flex; margin-bottom: 0; border-top: 1px solid   #d2152a; border-radius: 0; justify-content: space-between; align-items: flex-end; }
	.bottom_bar li{ display: inline-block; padding: 0; width: 100%;  border-radius: 0; font-size: 0;}
	.bottom_bar li:not(:last-child) { margin-bottom: 0; padding-bottom:0; border-bottom: none}
	.bottom_bar li:nth-child(2){ border-color:rgb(255 255 255 / 40%) rgb(255 255 255 / 40%) transparent rgb(255 255 255 / 40%)}   
	.bottom_bar .phone{ display: block;}
	.bottom_bar a p {text-align: center;}
	#top_btn{ bottom: 90px;}
  }