/*-----------------------------------------------------------------------------------

    Template Name: Babucare - Children Kindergarten Template
    Template URI: http://tf.itech-theme.com/babucare-preview
    Description: This is Children Kindergarten Template
    Author: itechtheme
    Author URI: https://themeforest.net/user/itechtheme/portfolio
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
  
    1. Home One
        1.1 Header Area
        1.2 Hero Area
        1.3 About Area
        1.4 Course Area
        1.5 Team Area
        1.6 Event Area
        1.7 Feature Blog
        1.8 Testimonial Area
        1.9 Contact Area
       1.10 Footer Area
    2. Home Two
    3. About Us
    4. Teacher Single
    5. Course Details
    6. Event Details
    7. Blog

-----------------------------------------------------------------------------------*/


/*============================================
    1. Home One / 1.1 Header Area
*=============================================*/


/* header top */

#header {
    position: relative;
}

.header-top {
    padding: 8px 0;
}

.ht-social li {
    display: inline-block;
}

.ht-social li a:hover {
    color: #9100e5;
}

.ht-social li a {
    color: #514f51;
    display: block;
    font-size: 15px;
    margin-right: 12px;
}

.ht-address {
    text-align: right;
}

.ht-address li {
    display: inline-block;
}

.ht-address li a {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: #3a393a;
    letter-spacing: 0;
    margin-left: 38px;
}

.ht-address li a:hover {
    color: #9100e5;
}

.ht-address li a i {
    margin-right: 10px;
}



/* header bottom */

.header-bottom {
    position: absolute;
    left: 0;
    z-index: 999;
    width: 100%;
    border-bottom: 4px solid #fff;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: #9100e5;
}

.sticky-header {
    position: fixed;
    top: 0;
}

.logo a {
    display: inline-block;
}

.main-menu {
    text-align: right;
}

.main-menu nav ul li {
    display: inline-block;
    position: relative;
}

.main-menu nav ul li a {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    padding: 44px 18px;
    position: relative;
    text-transform: capitalize;
}

.main-menu nav>ul>li>a:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border: 10px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top-color: transparent;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.main-menu nav ul li.active>a:before,
.main-menu nav ul li a:hover:before {
    opacity: 1;
    bottom: 0;
}

.main-menu nav .submenu {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 2;
    width: 220px;
    background: #fff;
    border-radius: 2px;
    padding: 8px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.main-menu nav ul li:hover>.submenu {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.main-menu nav .submenu li {
    display: block;
    text-align: left;
}

.main-menu nav .submenu li a {
    color: #444;
    padding: 6px 15px;
    position: relative;
    margin: 10px 0px;
    font-size: 14px;
}
.main-menu nav .submenu li a:before {
    content: '';
    position: absolute;
    left: 15px;
    bottom: 0;
    height: 2px;
    width: 10px;
    opacity: 0;
    background: #9100e5;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}



/* mobile menu slicknav*/

.slicknav_menu .slicknav_menutxt {
    display: none;
}

.slicknav_menu {
    background: transparent;
    margin-top: 21px;
}

.slicknav_menu .slicknav_icon-bar {
    background-color: #ffffff;
    height: 2px;
    width: 19px;
    margin: 3px 0px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.slicknav_btn {
    background-color: transparent;
    position: relative;
    margin-top: -42px;
    cursor: pointer;
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(2) {
    opacity: 0;
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(1px, 7px);
    transform: rotate(45deg) translate(1px, 7px);
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(3) {
    -webkit-transform: rotate(-45deg) translateY(-6px);
    transform: rotate(-45deg) translateY(-6px);
}

.slicknav_menu {
    margin: 10px 0;
    padding: 0;
}

.slicknav_nav {
    background: #202020;
    margin: 0;
    padding: 0;
}

.slicknav_nav a:hover {
    background: #fefefe;
    border-radius: 0;
}

.slicknav_nav a {
    font-size: 14px;
    letter-spacing: 0.01em;
}

.slicknav_nav .slicknav_arrow {
    float: right;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row:hover .slicknav_arrow {
    border-radius: 0;
    background-color: #3c3333;
}



/*============================================
    END Header Area
*=============================================*/


/*============================================
    1.2 Hero Area
*=============================================*/

.hero-area {
    height: 670px;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 105px;
    background: url("../images/bg/slider-bg1.jpg") center/cover no-repeat;
}
.hero-area:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    background: #272727;
}
.hero-content h2 {
    font-size: 44px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    line-height: 64px;
    margin-bottom: 27px;
}

.hero-content p {
    font-size: 16px;
    color: #fff;
}

.dft_btn {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    padding: 12px 42px;
    position: relative;
    z-index: 1;
    border-radius: 3px 0 10px 0;
}

.dft_btn:hover {
    color: #fff;
}

.dft_btn:before {
    content: '';
    position: absolute;
    left: 7px;
    top: 7px;
    z-index: -1;
    height: 100%;
    width: 100%;
    border-radius: 3px 0 10px 0;
    border: 1px solid #9100e5;
}

.dft_btn:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    border-radius: 3px 0 10px 0;
    background: #9100e5;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.dft_btn:hover:after {
    background: #444;
}

.hero-content a {
    margin-top: 50px;
}

/*============================================
    END Hero Area
*=============================================*/


/*============================================
    1.3 About Area
*=============================================*/

.section-title {
    margin-bottom: 50px;
    position: relative;
}

.section-title h2 {
    font-size: 35px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin-bottom: 23px;
}

.section-title h2 span {
    color: #9100e5;
    font-family: 'Rubik', sans-serif;
}

.section-title p {
    font-size: 17px;
    font-weight: 400;
    color: #3f3e3f;
}

.abt-content a {
    margin-top: 30px;
}
.abt-content p{
    margin-bottom: 20px;
}

.abt-img {
    margin-top: 0;
    max-width: 315px;
}



/*============================================
    END About Area
*=============================================*/


/*============================================
    1.4 Course Area
*=============================================*/

.course-single {
    margin-bottom: 40px;
}

.course-single h2 a {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    line-height: 29px;
    margin-bottom: 6px;
}

.course-single h2 a:hover {
    color: #9100e5;
}

.cs-thumb {
    border-radius: 0 30px 0 0;
    overflow: hidden;
}

.course-single .cs-thumb img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.course-single:hover .cs-thumb img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.course-content {
    background: #fff;
    padding: 20px;
    border: 1px solid #efefef;
    border-top: none;
    border-radius: 0 0 0 9px;
}

.course-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -55px 0 20px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.course-details p {
    padding: 10px 0;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    background: #fff;
    -ms-flex-preferred-size: calc(100% * (1/3) - 7px);
    flex-basis: calc(100% * (1/3) - 7px);
    position: relative;
    z-index: 1;
    border-radius: 0 7px 0 0;
}

.course-details p:before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: -1;
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: 0 7px 0 0;
    border: 1px solid #9100e5;
}

.course-details p:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    border-radius: 0 7px 0 0;
    background: #9100e5;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.course-details p:hover:after {
    background: #444;
}

.course-details p span {
    display: block;
    line-height: 21px;
}

.course-content>p {
    font-size: 14px;
    color: #5a5959;
    line-height: 25px;
}

.course-content>span {
    display: block;
    font-size: 14px;
    color: #5a5959;
    letter-spacing: 0;
    line-height: 25px;
    margin-bottom: 15px;
    color: #444;
}

.course-content a {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #9100e5;
    letter-spacing: 0;
    margin-top: 14px;
}

.course-content a i {
    margin-left: 3px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.course-content a:hover i {
    margin-left: 6px;
}



/*============================================
    END Course Area
*=============================================*/


/*============================================
    1.5 Team Area
*=============================================*/

.single-team {
    border-radius: 10px 10px 3px 3px;
    overflow: hidden;
    border: 3px solid #9100e5;
    margin-bottom: 40px;
}

.tm-thumb {
    position: relative;
}

.tm-thumb:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #9100e5;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-team:hover .tm-thumb:before {
    opacity: 0.65;
}

.tm-social {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.tm-social li {
    display: inline-block;
}

.tm-social li a {
    display: block;
    font-size: 18px;
    color: #fff;
    margin: 0 6px;
    opacity: 0;
}

.tm-social li a:hover {
    color: #444;
}

.single-team:hover .tm-social li a {
    margin: 0 4px;
    opacity: 1;
}

.tm-content {
    background: #9100e5;
    padding: 16px 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.tm-content h2 a {
    display: inline-block;
    font-size: 21px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 23px;
    margin-bottom: 4px;
}

.tm-content h2 a:hover {
    color: #3e3939;
}

.tm-content p {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}



/*============================================
    END Team Area
*=============================================*/


/*============================================
    1.6 Event Area
*=============================================*/

.event-single {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
}

.event-content {
    position: absolute;
    left: 0;
    bottom: -30px;
    background: rgba(255, 189, 10, 0.87);
    padding: 30px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.event-single:hover .event-content {
    bottom: 0;
}

.event-content h2 a {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0;
    margin-bottom: 5px;
    display: inline-block;
}

.event-content h2 a:hover {
    color: #444;
}

.event-content strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
    font-style: italic;
    margin-bottom: 14px;
}

.event-content p {
    color: #fff;
    font-size: 14px;
    line-height: 26px;
}

.event-content>a {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    margin-top: 15px;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.event-single:hover .event-content a {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.event-content a i {
    color: #ddd;
    margin-left: 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.event-content a:hover i {
    color: #fff;
    -webkit-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
}



/*============================================
    END Event Area
*=============================================*/


/*============================================
    1.7 Feature Blog
*=============================================*/

.single-blog {
    margin-bottom: 40px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.post-thumb {
    position: relative;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.post-thumb img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-blog:hover .post-thumb img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.post-time {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 2;
    background: #9100e5;
    padding: 11px 10px;
    border-radius: 2px;
}

.post-time span {
    display: block;
    text-align: center;
    line-height: 26px;
    color: #fff;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 13px;
}

.post-time span:last-child {
    font-size: 34px;
    line-height: 33px;
    font-weight: 700;
    margin-top: 5px;
}

.post-content {
    padding: 18px 25px 40px;
}

.blog-meta {
    margin-bottom: 12px;
}

.blog-meta li {
    display: inline-block;
    font-size: 14px;
    color: #635f5f;
    letter-spacing: 0;
    margin-right: 16px;
    font-weight: 500;
}

.blog-meta li i {
    margin-right: 4px;
}

.post-content h2 a {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    line-height: 34px;
    margin-bottom: 15px;
}

.post-content h2 a:hover {
    color: #9100e5;
}

.post-content p {
    color: #777;
}

.post-content>a {
    margin-top: 40px;
}



/*============================================
    END Feature Blog
*=============================================*/


/*============================================
    1.8 Testimonial Area
*=============================================*/

.testimonial-area {
    position: relative;
    z-index: 1;
    background: url("../images/bg/testimonial-bg.jpg") center/cover no-repeat;
}

.testimonial-area:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.95;
    background: #9100e5;
}

.tst-item {
    text-align: center;
    border: 1px solid #fff;
    padding: 0 30px 60px;
    margin-top: 45px;
}

.tst-thumb {
    height: 90px;
    width: 90px;
    margin: -45px auto 20px;
    border-radius: 50%;
    overflow: hidden;
}

.tst-item h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    margin-bottom: 2px;
}

.tst-item span {
    display: block;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    font-style: italic;
    margin-bottom: 19px;
    font-family: 'Rubik', sans-serif;
}

.tst-item p {
    font-size: 14px;
    color: #ffffff;
    line-height: 26px;
}


.ttl-white h2 span {
    color: #fff;
}

.ttl-white p {
    color: #fff;
}

.ttl-white span.ttl {
    color: #fff;
}

.ttl-white span.ttl:before {
    background-color: #fff;
}



/*============================================
    END Testimonial Area
*=============================================*/


/*============================================
    1.9 Contact Area
*=============================================*/
.contact-form .alert-danger {
    letter-spacing: 0;
}
.contact-form h4 {
    font-size: 24px;
    font-weight: 700;
    color: #d50a8b;
    letter-spacing: 0;
    margin-bottom: 12px;
}

.contact-form p {
    font-size: 20px;
    font-weight: 700;
    color: #646464;
    margin-bottom: 50px;
}

.contact-form form input,
.contact-form form textarea,
.contact-form form button {
    height: 50px;
    width: 100%;
    margin-bottom: 20px;
    padding-left: 15px;
    letter-spacing: 0;
    border: 1px solid #999;
    color: #444;
}

.contact-form form textarea {
    height: 164px;
    padding-top: 12px;
}

.contact-form form button {
    margin-bottom: 0;
    padding: 0;
    height: 56px;
    text-align: center;
    font-size: 18px;
    width: 208px;
    background: transparent;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form form button:hover {
    background: #9100e5;
    color: #fff;
    border: 1px solid #9100e5;
}

.contact-address {
    padding-left: 40px;
}

.cnt-single {
    margin-bottom: 35px;
}

.cnt-single h4 {
    font-size: 21px;
    font-weight: 700;
    color: #fdbd14;
    letter-spacing: 0;
    margin-bottom: 10px;
}

.cnt-single h4 i {
    font-size: 15px;
    height: 30px;
    width: 30px;
    background: #fdbd14;
    color: #fff;
    text-align: center;
    line-height: 30px;
    margin-right: 14px;
}

.cnt-single p {
    font-size: 15px;
    font-weight: 400;
    color: #646464;
}

.cnt-single p span.line_break {
    display: block;
}



/*============================================
    END Contact Area
*=============================================*/


/*============================================
    1.10 Footer Area
*=============================================*/

.footer-top {
    position: relative;
    z-index: 1;
    background: url("../images/bg/footer-top-bg.jpg") center/cover no-repeat;
}

.widget {
    margin-bottom: 50px;
}

.footer-top .widget {
    margin-bottom: 0px;
}

.footer-top:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.9;
    background: #000;
}

.widget-company a {
    display: inline-block;
    margin-bottom: 26px;
}

.widget-company ul li {
    font-size: 16px;
    color: #fcfcfc;
    letter-spacing: 0;
    margin: 17px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 28px;
}

.widget-company ul li i {
    min-width: 26px;
    margin-top: 6px;
}

.widget-company form {
    position: relative;
    margin-top: 35px;
}

.widget-company form input {
    height: 60px;
    background: #4f4f4f;
    color: #fff;
    letter-spacing: 0;
    padding-left: 15px;
    border: none;
    width: 100%;
}

.widget-company form input::-webkit-input-placeholder {
    color: #fff;
}

.widget-company form input::-moz-placeholder {
    color: #fff;
}

.widget-company form input:-ms-input-placeholder {
    color: #fff;
}

.widget-company form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 70px;
    background: #9100e5;
    border: none;
    color: #fff;
    outline: none;
}

.fwidget-title {
    font-size: 23px;
    font-weight: 700;
    color: #fcfcfc;
    letter-spacing: 0;
    line-height: 38px;
    margin: 7px 0 37px;
}

.twt-post {
    border: 1px solid #2b2c2c;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.twt-post p {
    color: #ffffff;
    line-height: 26px;
}

.twt-post a {
    color: #9100e5;
    letter-spacing: 0;
    display: inline-block;
}

.twt-post span {
    display: block;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 0;
    margin-top: 5px;
}

.twt-post span i {
    margin-right: 8px;
}

.ft-list-item li a {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #fcfcfc;
    letter-spacing: 0;
    margin: 22px 0;
    position: relative;
    padding-left: 15px;
}

.ft-list-item li a:hover {
    color: #9100e5;
}

.ft-list-item li a:before {
    content: '\f105';
    position: absolute;
    left: 0;
    top: 1px;
    font-family: fontawesome;
    font-size: 19px;
    -webkit-transition: left 0.3s ease 0s;
    transition: left 0.3s ease 0s;
}

.ft-list-item li a:hover:before {
    left: 2px;
}

.footer-bottom {
    padding: 20px 0;
    background: #201f1f;
}

.footer-bottom p {
    color: #fffefe;
    font-size: 15px;
}

.fb-social {
    text-align: right;
}

.fb-social li {
    display: inline-block;
}

.fb-social li a {
    display: block;
    font-size: 16px;
    margin-left: 17px;
    color: #fff;
}



/*============================================
    END Footer Area
*=============================================*/


/*============================================
    2. Home Two
*=============================================*/

.ht-s2 {
    background: #414042;
    position: relative;
    z-index: 12;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.ht-s2 .ht-social {
    text-align: right;
}

.ht-s2 .ht-address {
    text-align: left;
}

.ht-s2 .ht-address li a {
    margin-left: 0;
}

span.search {
    display: inline-block;
    float: right;
    font-size: 18px;
    height: 33px;
    width: 33px;
    background: #fff;
    color: #9100e5;
    text-align: center;
    line-height: 33px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

span.search:hover {
    background-color: #9100e5;
    color: #fff;
}



/* header-middle */

.header-middle {
    padding: 24px 0 15px;
}

.h-address-s2 {
    text-align: right;
}

.h-address-s2 li {
    text-align: left;
    display: inline-block;
    margin-left: 90px;
}

.h-address-s2 li:first-child {
    margin-left: 0;
}

.h-address-s2 li i {
    float: left;
    font-size: 39px;
    color: #9100e5;
    margin-right: 15px;
    margin-top: 9px;
}

.h-address-s2 li h2 {
    overflow: hidden;
    font-size: 21px;
    font-weight: 500;
    color: #414042;
    letter-spacing: 0;
}

.h-address-s2 li h2 span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: #414042;
    letter-spacing: 0;
    margin-top: 4px;
}



/* hb-style2 */


.hb-style2 {
    background: #9100e5;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 11;
}

.hb-style2.sticky-header {
    position: fixed;
    animation: fadeinheader 800ms ease-in-out forwards;
}

@keyframes fadeinheader{
    0%{
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%{
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

.header-middle {
    padding: 9px 0 1px;
}

.header-middle ul.ht-social {
    margin-top: 14px;
}
.header-middle .ht-social li a {
    font-size: 18px;
}

/* hero-s2 */

.hero-s2 {
    height: 900px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: url("../images/bg/slider-bg2.jpg") center/cover no-repeat;
    position: relative;
    z-index: 1;
}

.hero-s2:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background: #5a5757;
}

.hero-s2 .hero-content {
    text-align: center;
}
.hero-s2 .hero-content h2,
.hero-s2 .hero-content p{
    color: #fff;
}
.hero-s2 .hero-content a {
    margin-top: 54px;
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    padding: 14px 34px;
    background: #9100e5;
    color: #fff;
}

.hero-s2 .hero-content a:hover {
    color: #9100e5;
    background: #ffffff;
}



/* feature service */

.feature-service {
    position: relative;
    margin-top: -132px;
    z-index: 1;
}

.fsvc-single {
    text-align: center;
    box-shadow: 0 9px 38px rgba(0, 0, 0, 0.06);
    padding: 50px 20px;
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg);
    background: #fff;
}

.fsvc-inner {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
}

.fsvc-single .icon {
    height: 105px;
    width: 105px;
    border: 1px solid #9100e5;
    border-radius: 50%;
    text-align: center;
    line-height: 105px;
    font-size: 44px;
    color: #9100e5;
    margin: 0 auto 30px;
}

.fsvc-single h2 {
    font-size: 20px;
    font-weight: 500;
    color: #50504e;
    letter-spacing: 0;
    padding-right: 25px;
}


/*about two*/
.abt-s2 .abt-img{
    margin-top: 0;
}


/* contact-address-s2 */

.contact-address-s2 .cnt-single {
    margin-bottom: 60px;
}

.contact-address-s2 .cnt-single:last-child {
    margin-bottom: 0;
}

.cnt-single .icon {
    height: 45px;
    width: 45px;
    text-align: center;
    line-height: 45px;
    border: 1px solid #9100e5;
    color: #9100e5;
    float: left;
    margin-right: 40px;
    margin-top: 10px;
    font-size: 22px;
}

.cnt-single p {
    overflow: hidden;
}

.contact-form-s2 {
    padding: 40px;
    box-shadow: 0px 0px 32px 0px rgba( 0, 0, 0, 0.05);
    margin-bottom: -500px;
    position: relative;
    background: #fff;
    z-index: 2;
}

.contact-form-s2 form input,
.contact-form-s2 form textarea {
    width: 100%;
    height: 70px;
    margin-bottom: 20px;
    padding-left: 20px;
    border: 1px solid #9100e5;
    font-size: 18px;
    color: #5b5b5b;
    letter-spacing: 0;
}

.contact-form-s2 form input::-webkit-input-placeholder {
    font-size: 18px;
    color: #5b5b5b;
    letter-spacing: 0;
}

.contact-form-s2 form input::-moz-placeholder {
    font-size: 18px;
    color: #5b5b5b;
    letter-spacing: 0;
}

.contact-form-s2 form input:-ms-input-placeholder {
    font-size: 18px;
    color: #5b5b5b;
    letter-spacing: 0;
}

.contact-form-s2 form textarea {
    height: 170px;
    padding-top: 15px;
}

.contact-form-s2 form button {
    width: 100%;
    height: 70px;
    border: none;
    background: #9100e5;
    letter-spacing: 0;
    font-size: 18px;
    color: #fff;
}



/* footer two */

.ft-s2 {
    padding-top: 200px;
}



/*============================================
    END Home Two
*=============================================*/


/*============================================
    3. About Us
*=============================================*/

.crumbs-area {
    position: relative;
    z-index: 1;
    height: 425px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 100px;
    background: url("../images/bg/crumbs-bg.jpg") center/cover no-repeat;
}

.crumbs-area:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background: #272727;
}

.crumbs-content h2 {
    font-size: 43px;
    font-weight: 700;
    color: #f9f9f9;
    letter-spacing: 0;
    line-height: 47px;
    margin-bottom: 31px;
}

.crumbs-content ul li {
    display: inline-block;
}

.crumbs-content ul li {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    text-transform: capitalize;
}

.crumbs-content ul li a {
    color: #fff;
    display: block;
    margin-right: 20px;
    position: relative;
}

.crumbs-content ul li a:hover {
    color: #201f1f;
}

.crumbs-content ul li a:before {
    content: '\f105';
    position: absolute;
    right: -18px;
    top: 0;
    font-family: fontawesome;
    color: #fff;
}

.crumbs-content ul li span {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
    background: #9100e5;
    margin-left: 19px;
    padding: 13px 15px;
    display: inline-block;
}

.about-area .section-title{
    margin-bottom: 30px;
}


/*============================================
    END About Us
*=============================================*/


/*============================================
    4. Teacher Single
*=============================================*/

.tdl-img {
    padding: 0 15px 15px 0;
    position: relative;
}

.tdl-img:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    border: 1px solid #9100e5;
    border-top: none;
    border-left: none;
    border-radius: 0 0 13px 0;
}

.tdr-content .section-title h2 {
    margin-bottom: 13px;
}

.tdr-content .section-title {
    margin-bottom: 25px;
}

.tdr-content>p {
    font-size: 16px;
    font-weight: 400;
    color: #484747;
    margin-bottom: 23px;
}

.tdr-content ul.td-address li {
    display: inline-block;
    color: #9100e5;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    margin-right: 25px;
    font-family: 'Rubik', sans-serif;
}

.tdr-content ul.td-address li span {
    color: #484747;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    font-size: 15px;
}

.teacher-social {
    margin-top: 12px;
}

.teacher-social li {
    display: inline-block;
}

.teacher-social li a {
    display: block;
    font-size: 16px;
    color: #484747;
    margin-right: 12px;
}

.teacher-social li a:hover {
    color: #9100e5;
}

.teacher-skill {
    margin-top: 50px;
}

.teacher-skill h2 {
    font-size: 24px;
    font-weight: 700;
    color: #9100e5;
    letter-spacing: 0;
    margin-bottom: 34px;
}

.edu-single {
    margin-bottom: 20px;
    border: 1px solid #2c2c2c;
}

.edu-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    background: #3b393a;
    padding-left: 16px;
    height: 100%;
    padding-top: 7px;
}

.edu-desc p {
    font-size: 15px;
    color: #484747;
    padding: 8px 15px;
}



/* skill-progress-bar */

.skill-progress-bar {
    margin-top: 30px;
}

.progress_bar {
    margin-bottom: 30px;
}

.progress_bar h5 {
    font-size: 18px;
    font-weight: 500;
    color: #4c4c4c;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.pr-area {
    border: 1px solid #6e6e6e;
    border-radius: 20px;
    height: 13px;
    padding: 3px;
}

.pr-bar {
    height: 100%;
    background: #9100e5;
    border-radius: 20px;
    position: relative;
}

.pr-bar span {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #9100e5;
    position: absolute;
    right: 0;
    bottom: 19px;
    padding: 0 9px;
    letter-spacing: 0;
}

.pr-bar span:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -18px;
    border: 9px solid #9100e5;
    border-bottom-color: transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}



/*============================================
    END Teacher Single
*=============================================*/


/*============================================
    5. Course Details
*=============================================*/

.csd-thumb {
    border: 2px solid #9100e5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 35px;
}
.csd-content h2 a {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin-bottom: 15px;
}
.csd-content h2 a:hover{
    color: #9100e5;
}

.csd-content>span {
    font-size: 18px;
    font-weight: 500;
    color: #5d5a5a;
    letter-spacing: 0;
    margin-bottom: 32px;
    display: block;
}

.csd-content p {
    font-size: 15px;
    color: #5a5959;
    margin-bottom: 19px;
}

.csd-content h4 {
    font-size: 24px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin: 37px 0 20px;
}

.csd-content ul li a {
    display: block;
    font-size: 16px;
    color: #5a5959;
    letter-spacing: 0;
    font-style: italic;
    font-weight: 400;
    margin: 14px 0;
}

.csd-content ul li a i {
    color: #444;
    margin-right: 10px;
}



/* sidebar */

.sidebar .widget {
    background: #f5f4f5;
    padding: 30px;
}

.widget.widget-search {
    padding: 0;
}

.sidebar .widget:last-child {
    margin-bottom: 0px;
}

.widget-search form {
    position: relative;
}

.widget-search form input {
    height: 50px;
    width: 100%;
    padding-left: 15px;
    letter-spacing: 0;
    border: 1px solid #9100e5;
    color: #222;
    border-radius: 2px;
}

.widget-search form input::-webkit-input-placeholder {
    color: #999;
}

.widget-search form input::-moz-placeholder {
    color: #999;
}

.widget-search form input:-ms-input-placeholder {
    color: #999;
}

.widget-search form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
    background: transparent;
    border: none;
    background: #fff;
    border: 1px solid #9100e5;
    color: #9100e5;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.widget-search form button:hover {
    background: #9100e5;
    color: #fff;
}

.sidebar .widget-feature {
    background: #484747;
}

h2.widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #353535;
    letter-spacing: 0;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 18px;
}

.widget-feature h2.widget-title {
    color: #fff;
}

.widget-feature .list li a {
    color: #fff;
    border-top: 1px solid #464343;
    border-left: none;
    border-right: none;
    margin: 0;
    padding: 15px;
}

.widget-feature .list li:first-child a {
    border: none;
}

.list li a {
    display: block;
    font-size: 14px;
    color: #292828;
    letter-spacing: 0;
    margin: 18px 0;
}

.list li a:hover {
    color: #9100e5;
}

.list li a span {
    float: right;
}

.list li a i {
    margin-right: 10px;
}



/*============================================
    END Course Details
*=============================================*/


/*============================================
    6. Event Details
*=============================================*/

.evd-thumb {
    margin-bottom: 50px;
}

.evd-content h2 a {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin-bottom: 15px;
}

.evd-content h2 a span {
    color: #9100e5;
}

.evd-content>span {
    font-size: 18px;
    font-weight: 700;
    color: #5a5959;
    letter-spacing: 0;
    margin-bottom: 32px;
    display: block;
}

.evd-content p {
    font-size: 14px;
    color: #505050;
    margin-bottom: 16px;
}

.evd-content ul {
    margin-top: 40px;
}

.evd-content ul li {
    display: block;
    font-size: 14px;
    color: #505050;
    letter-spacing: 0;
    margin: 18px 0;
}

.evd-content ul li span {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: #9100e5;
    letter-spacing: 0;
    width: 150px;
    font-family: 'Rubik', sans-serif;
}

.evd-content ul li a {
    font-size: 15px;
    color: #3d3d3d;
    margin-right: 10px;
}

.evd-content ul li a:hover {
    color: #9100e5;
}



/*============================================
    END Event Details
*=============================================*/


/*============================================
    7. Blog
*=============================================*/

.widget-recent-post ul li {
    display: block;
    overflow: hidden;
    margin-bottom: 30px;
}

.widget-recent-post ul li img {
    float: left;
    max-width: 70px;
    margin-right: 15px;
}

.widget-recent-post .content {
    overflow: hidden;
}

.widget-recent-post .content h2 a {
    display: block;
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500;
    color: #444;
    margin-bottom: 6px;
}

.widget-recent-post .content h2 a:hover {
    color: #9100e5;
}

.widget-recent-post .content p {
    font-size: 13px;
    line-height: 21px;
}



/* widget-tags */

.widget-tags ul li {
    display: inline-block;
}

.widget-tags ul li a {
    display: block;
    background: #484747;
    color: #fff;
    padding: 8px 13px;
    margin-bottom: 5px;
    letter-spacing: 0;
    font-weight: 300;
    border-radius: 2px;
    font-size: 13px;
}

.widget-tags ul li a:hover {
    background-color: #9100e5;
}

.pagination_area {
    margin-top: 20px;
}

.pagination_area ul li {
    display: inline-block;
}

.pagination_area ul li a {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #9100e5;
    border: 1px solid #9100e5;
    padding: 10px 17px;
    font-weight: 700;
    margin-right: 4px;
}

.pagination_area ul li.active a,
.pagination_area ul li a:hover {
    background: #9100e5;
    color: #fff;
}

.post-d-text p {
    color: #5e5d5d;
    margin-bottom: 19px;
}

.post-d-text blockquote {
    border-left: 3px solid #f2f2f2;
    padding: 20px 30px 20px;
}

.post-d-text blockquote p {
    margin: 0;
}

.blog-share {
    margin-top: 40px;
}

.blog-share span {
    font-size: 18px;
    font-weight: 700;
    color: #9100e5;
    letter-spacing: 0;
    margin-right: 25px;
    font-family: 'Rubik', sans-serif;
}

.blog-share a {
    font-size: 16px;
    color: #514f51;
    margin-right: 7px;
}



/*comment area*/

.comment-area {
    overflow: hidden;
    margin-top: 50px;
}

h4.comment-title {
    font-size: 24px;
    font-weight: 700;
    color: #9100e5;
    letter-spacing: 0;
    margin-bottom: 30px;
}

h4.comment-title span {
    margin-left: 7px;
}

.comment-info-inner article {
    overflow: hidden;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.comment-thumb {
    float: left;
}

.comment-thumb img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin-right: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.comment-content {
    overflow: hidden;
    background: #f9f9f9;
    padding: 30px;
}

.comment-content .meta-data h2 {
    font-size: 18px;
    color: #444;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 5px;
}

.comment-content .meta-data span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #565353;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.comment-content .meta-data span i {
    margin-right: 8px;
}

.comment-content p {
    font-size: 14px;
    font-weight: 400;
    color: #5f5a5a;
    letter-spacing: 0;
    line-height: 23px;
    margin-top: 16px;
}

.comment-content a {
    margin-top: 12px;
    display: inline-block;
    color: #9100e5;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 14px;
}

.comment-content a i {
    margin-right: 8px;
}

.comment-content a:hover {
    color: #000;
}

.children {
    padding-left: 60px;
}



/*leave-comment-area*/

.leave-comment-area form input,
.leave-comment-area form textarea {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding-left: 15px;
    letter-spacing: 0;
    font-weight: 500;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.leave-comment-area form input:focus,
.leave-comment-area form textarea:focus {
    border-color: #9100e5;
}

.leave-comment-area form textarea {
    height: 120px;
    padding-top: 12px;
}

.leave-comment-area form #c_submit {
    margin-bottom: 0;
    max-width: 120px;
    background-color: #9100e5;
    text-align: center;
    padding-left: 0;
    color: #fff;
    outline: none;
    border: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.leave-comment-area form #c_submit:hover {
    background-color: #333;
}

#google_map {
    height: 550px;
}



/*============================================
    END Blog
*=============================================*/