

a:hover{
    text-decoration: none;
}

#navbar{

    position: -webkit-sticky; /* Safari */
    position: sticky;
    z-index: 22;
    top: 0;

}

.nav-item.active .nav-link{
    font-weight: bold;
    color: #007bff!important;
}

.banner{
    display: flex;
    height: 100vh;
    background-position: center;
    background-size: cover;
    justify-content:center;
    align-items: center;
}

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-box{
    max-width: 650px;
}

.round-20{
    border-radius: 20px;
}

.round-45{
    border-radius: 45px;
}

.font-25{
    font-size: 25px;
}

.hover-white-10{
    transition: transform .5s, box-shadow .5s;
}

.hover-white-10:hover{
    transform: translateY(-5px);
    box-shadow: 5px 5px 15px white;
}

.hover-black-10{
    border-radius: 10px;
    transition: transform .5s, box-shadow .5s;
}

.hover-black-10:hover{
    transform: translateY(-5px);
    box-shadow: 5px 5px 15px rgb(0, 0, 0);
}


/* Banner Carousel */
#banner-carousel .owl-prev,
#banner-carousel .owl-next {
  position: absolute;
  padding: 10px !important;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px !important;
  color: white;
}

#banner-carousel .owl-prev {
    left: 20px;
  }

#banner-carousel .owl-next {
    right: 20px;
}

#banner-carousel .owl-dots{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#banner-carousel .owl-dot > span {
    cursor: pointer;
    height: 16px !important;
    width: 16px !important ;
    margin:  0 2px !important;
    background-color: rgba(255, 255, 255, 0) !important;
    border: 2px solid #007bff !important;
    border-radius: 50% !important;
    display: inline-block !important;
    transition: background-color 0.6s ease !important;
}

#banner-carousel .owl-dot.active > span {
    background-color: #007bff !important;
}
/* Banner Carousel End */


/*  */

.overflow{
    overflow: hidden;
}

.card-img-top{
    transition: transform .5s;
}
.course:hover .card-img-top {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    filter: blur(1.5px);
}

.course {
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
}

.scale-anm {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);

}

.fil_btn.active{
    background-color: #007bff !important;
    color: #eee !important;
}

.about-list > li{
    list-style-type: none;
}

.dot{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: #fff;
}

.about-btn{
    background-color: #5FB4E8;
    color: white;
}

.card{
    border: none;
}

.rool{
    width: 100px;
    border: 1px solid black;
    transition: border .5s;
}


.service:hover .rool{
    border-color: white;
    transition: border .5s;
}


/* Sweep To Bottom */
.hvr-sweep-to-bottom {
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    -webkit-transition-property: color, box-shadow;
    transition-property: color, box-shadow;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;

}
.hvr-sweep-to-bottom:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background: #007bff;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;

}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
    color: white;
    box-shadow: 3px 3px 15px rgb(0, 0, 0);
    -webkit-transition-property: color, box-shadow;
    transition-property: color, box-shadow;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

#achievement {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/AchiveMent@2x.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}


.portfolio_item {
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
}

.portfolio_img {
    line-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.portfolio_img img {
    max-width: 100%;
    width: 100%;
    height: auto;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.portfolio_content {
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
    border: 2px solid #eee;
    text-decoration: none;
}

.portfolio_content h4 {
    margin: 0px;
    font-size: 18px;
    padding: 1rem;
    color: #464646;
}

.portfolio_item:hover .portfolio_img img {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    filter: blur(2px);
}

.scale-anm {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);

}
#portfolio.blue .fil_btn.active, #portfolio.blue .fil_btn:hover, .portfolio_page.blue .fil_btn.active, .portfolio_page.blue .fil_btn:hover {
    color: #39459b; }
#portfolio.green .fil_btn.active, #portfolio.green .fil_btn:hover, .portfolio_page.green .fil_btn.active, .portfolio_page.green .fil_btn:hover {
    color: #13c8c2; }
#portfolio.purple .fil_btn.active, #portfolio.purple .fil_btn:hover, .portfolio_page.purple .fil_btn.active, .portfolio_page.purple .fil_btn:hover {
    color: #8312d1; }


.review{
    background-color: #2E9CF2;
    box-shadow: 5px 5px 15px black;
}

.roll-left{
    width: 200px;
    height: 3px;
    background-color: white;
    border-radius: 20px;
}

.play-btn{
    position: absolute;
    font-size: 100px;
    cursor: pointer;
    color: white;
    top: 50%;
    left: 50%;
    transition: color 0.8s;
    transform: translate(-50%, -50%);
}

.play-btn:hover{
    color: #c4302b;
    transition: color 0.8s;
}

.team_item, .about_team .team_item {
    border-radius: 8px;
    overflow: hidden; }
.team_item .pic, .about_team .team_item .pic {
    position: relative; }
.team_item .pic img, .about_team .team_item .pic img {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
.team_item .pic:before, .about_team .team_item .pic:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: all 0.3s ease 0s;
    z-index: 1; }
.team_item .pic:after, .about_team .team_item .pic:after {
    content: "";
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    opacity: 0;
    transition: all 0.3s ease 0s;
    z-index: 1; }
.team_item .social-links, .about_team .team_item .social-links {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 40px;
    left: 0;
    opacity: 0;
    z-index: 2;
    transition: all 0.3s ease 0s;
    justify-content: center;
    color: #fff;
    font-size: 20px; }
.team_item .social-links li, .about_team .team_item .social-links li {
    margin: 0 .5rem; }
.team_item .social-links li a, .about_team .team_item .social-links li a {
    color: #fff; }
.team_item .team-content, .about_team .team_item .team-content {
    padding: 15px 0;
    background: #f9f9f9;
    overflow: hidden;
    position: relative; }

.team_item .team-content:before, .about_team .team_item .team-content:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: -100%;
    left: 0;
    transition: all 0.3s ease-out 0s; }
.team_item .title, .team_item .post, .about_team .team_item .title, .about_team .team_item .post {
    transition: all 0.5s ease 0s;
    position: relative;
    z-index: 1;}
.team_item:hover .team-content, .about_team .team_item:hover .team-content {
    color: #fff;
}
.team_item:hover .team-content:before, .about_team .team_item:hover .team-content:before {
    top: 0; }
.team_item:hover .pic img, .about_team .team_item:hover .pic img {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    filter: blur(2px); }
.team_item:hover .pic:before, .team_item:hover .pic:after, .team_item:hover .pic .social-links, .about_team .team_item:hover .pic:before, .about_team .team_item:hover .pic:after, .about_team .team_item:hover .pic .social-links {
    opacity: 1; }
.blue .team-content, .about_team.blue .team-content {
    border-top: 3px solid #128CF1; }
.blue .team-content:before, .about_team.blue .team-content:before {
    background-color: #128CF1; }


#get-in-touch {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/get_in_touch.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.form-control{
    background-color: transparent!important;
    border: 2px solid #128CF1;
    color: rgb(255, 255, 255);
}

.form-control:focus{
    background-color: transparent!important;
    border: 2px solid #128CF1;
    color: rgb(255, 255, 255);
}

.message-form{
    border: 2px solid #128CF1;
    padding: 40px 15px 30px 15px  ;
    border-radius: 10px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(255, 255, 255, .6);

}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, .6);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(255, 255, 255, .6);
}


.banner-2{
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,1)), url('../images/banner-2.jpg');
    height: 550px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.outer{
    overflow: hidden;
    width: inherit;
    border-radius: 10px 0px 0px 10px;
    background-color: red;
}

.inner{
    margin-left: 10px;
    border-radius: 10px 0px 0px 10px;
}


ul{
    list-style:none;
    padding-left: 15px;
    margin:0;
}

#enroll-form{
    background-color: rgba(0,0,0, 0.5);
}

#enroll-form .form-control{
    background-color: transparent!important;
    border: 2px solid #eee;
    color: #eee;
}

.course-option{
    background-color: rgba(0,0,0, 0.5);
    color: #eee;
}

.enroll-banner{
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,1)), url('../images/banner-2.jpg');
    height: 680px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}



