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

    Template Name: Driveon - Driving School HTML Template
    Template URI: http://hastech.company/
    Description: Bootstrap HTML Template
    Author: Hastech
    Author URI: http://hastech.company/
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1.   Page Banner Title Area
    2.   Feature Area
	3.   Course Area
	4.   Video Area
	5.   Instructor Area
	6.   FAQ Area
	7.   Call To Action Area
	8.   Contact Area
	9.   Dark Version Style
	
	
-----------------------------------------------------------------------------------*/
/*-------------------------- 


	1. Page Banner Title Area
--------------------------*/
/*

own style
*/
.standard-size{
    width: 400px !important;
    height: 300px !important; 
    object-fit: cover !important;
  }
  .heading {
    font-weight: 600 !important;
  }
  
  .top-card {
    margin: 0 10px 10px 0 !important;
    padding: 0 10px;
    height: 70px;
    width: 350px;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: white !important;
    border-radius: 20px !important;
  }
  
  .dis-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .top-title {
    color: #fff;
    font-size: 3em;
    background-color: #f39c12;
    padding: 10px;
    border-radius: 50px;
    border-left: 10px solid #c97d02;
    border-right: 10px solid #c97d02;
  }
  
  X .top-card .icon {
    padding: 10px;
  }
  
  .top-card .icon i {
    padding-right: 10px;
  }
  
  .top-card:nth-child(1) {
    background-color: #ff1744;
    border-left: 10px solid #b2102f !important;
  }
  
  .top-card:nth-child(2) {
    background-color: #68bb6c;
    border-left: 10px solid #3e6f40 !important;
  }
  
  .top-card:nth-child(3) {
    background-color: #006064;
    border-left: 10px solid #002f30 !important;
  }
  
  .top-card:nth-child(4) {
    background-color: #2395ec;
    border-left: 10px solid #17649f !important;
  }
  
  /* Style the fixed bottom section */
  #fixed-bottom {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    z-index: 2147483647;
    height: 60px;
    display: flex;
    justify-content: center;
  }
  
  #fixed-bottom .btn {
    border-radius: 10px;
  }
  
  .fixed-inside {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    color: rgb(255, 255, 255);
    background-color: rgb(51, 51, 51);
    width: 100%;
  }
  
  .contact-section {
    background-color: #f39c12;
    height: 80px;
    border-radius: 16px;
    width: 70%;
    margin: 30px;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .contact-social {
    display: flex;
    justify-content: center;
  }
  
  .contact-social #social {
    border-radius: 50px !important;
  }
  
  .contact-social a {
    /* border: 1px solid #262626; */
    color: #262626;
    background-color: #fff;
    display: block;
    float: left;
    height: 50px;
    margin-right: 15px;
    text-align: center;
    width: 50px;
  }
  
  .contact-social a i {
    display: block;
    font-size: 22px;
    line-height: 50px;
  }
  
  .contact-social a:hover {
    background-color: #262626;
    border-color: #262626;
    color: #fff;
  }
  
  /* course categories */
  /* .autumatic */
  .autumatic {
    padding-top: 10px;
    background-color: #f39c12;
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
  
  .autumatic h2 {
    color: #fff;
  }
  
  .autumatic .icofont {
    color: #fff !important;
  }
  
  .autumatic .excerpt h5 {
    color: #fff;
  }
  
  .autumatic::before,
  .autumatic::after {
    background-color: #fff !important;
  }
  
  .autumatic-i i {
    color: #f39c12 !important;
  
  }
  
  .autumatic-i .list-style li:before {
    color: #f39c12 !important;
  }
  
  .autumatic .excerpt,
  .manual .excerpt,
  .intensive .excerpt,
  .passplus .excerpt, 
  .Mobility .excerpt {
    color: white;
  }
  
  
  /* .manual */
  .manual {
    padding-top: 10px;
    background-color: #ff1744;
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
  
  .manual h2 {
    color: #fff;
  }
  
  .manual .icofont {
    color: #fff;
  }
  
  .manual .excerpt h5 {
    color: #fff;
  }
  
  .manual::before,
  .manual::after {
    background-color: #fff !important;
  }
  
  .manual-i i {
    color: #ff1744 !important;
  
  }
  
  
  
  .section-title .excerpt p {
    font-weight: 400;
    font-size: 20px;
  }
  
  /* .intensive */
  .intensive {
    padding-top: 10px;
    background-color: #4caf50;
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
  
  .intensive h2 {
    color: #fff;
  }
  
  .intensive .icofont {
    color: #fff;
  }
  
  .intensive .excerpt h5 {
    color: #fff;
  }
  
  .intensive::before,
  .intensive::after {
    background-color: #fff !important;
  }
  
  .intensive-i i {
    color: #4caf50 !important;
  }
  
  
  
  /* .Mobility */
  .Mobility {
    padding-top: 10px;
    background-color: #006064;
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
  
  .Mobility h2 {
    color: #fff;
  }
  
  .Mobility .icofont {
    color: #fff;
  }
  
  .Mobility .excerpt h5 {
    color: #fff;
  }
  
  .Mobility::before,
  .Mobility::after {
    background-color: #fff !important;
  }
  
  .Mobility-i i {
    color: #006064 !important;
  }
  
  
  
  
  /* .passplus */
  .passplus {
    padding-top: 10px;
    background-color: #2395ec;
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
  
  .passplus h2 {
    color: #fff;
  }
  
  .passplus .icofont {
    color: #fff;
  }
  
  .passplus .excerpt h5 {
    color: #fff;
  }
  
  .passplus::before,
  .passplus::after {
    background-color: #fff !important;
  }
  
  .passplus-i i {
    color: #2395ec !important;
  }
  
  
  
  /* end course categories */
  
  .header-social {
    display: flex;
    justify-content: center;
  }
  
  .header-social .social {
    border-radius: 20px !important;
  }
  
  .header-social a {
    /* border: 1px solid #262626; */
    color: #262626;
    /* background-color: #fff; */
    display: block;
    float: left;
    height: 30px;
    margin-right: 15px;
    text-align: center;
    width: 30px;
  }
  
  .header-social a i {
    display: block;
    font-size: 15px;
    line-height: 30px;
  }
  
  /* .header-social a:hover {
    background-color: #f39c12;
    border-color: #f39c12;
    color: #fff;
  } */
  
  
  
  .hero-span {
    font-weight: 900;
    border-radius: 10px;
    background-color: rgba(27, 27, 27, 0.537);
    border: 3px solid #f39c12;
    padding: 6px;
  }
  
  .feedback {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
  }
  
  .custom-select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #f1f1f1;
    background-clip: padding-box;
    border: 3px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .custom-select:focus {
    border-color: #f39c12;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #feb8144f
  }
  
  .custom-select:disabled {
    background-color: #e9ecef;
    opacity: 1;
  }
  
  .custom-select option {
    color: #495057;
    background-color: #fff;
    border: none;
  }
  
  
  
  .i-style i {
    color: #feb801;
    font-size: 19px;
    padding: 0 10px;
  }
  
  #logo_img {
    height: 70px !important;
  }
  
  #testimonial-area h1 {
    color: white;
  }
  
  .content-section {
    margin-top: 60px;
  }
  
  .content-section:first-child {
    margin-top: 0px;
  }
  
  .content .list-style li {
    position: relative;
    padding-left: 18px;
    margin-left: 0;
    margin-bottom: 12px;
  }
  
  .content .list-style li:last-child {
    margin-bottom: 0;
  }
  
  .content .list-style li:before {
    font-family: 'FontAwesome';
    content: '\f105';
    color: #006064;
    position: absolute;
    left: 1px;
    top: 3px;
    font-size: 22px;
    line-height: 18px;
  }
  
  .light .content .list-style li:before,
  .call-action:not(.dark) .content .list-style li:before {
    color: #fff;
  }
  
  .content .list-style.dots li:before {
    content: '\f111';
    font-size: 12px;
  }
  
  .content .list-style.list-sitemap li {
    margin-bottom: 10px;
    font-weight: 400;
  }
  
  .content .list-style.list-sitemap li:last-child {
    margin-bottom: 0;
  }
  
  .content .list-style.list-sitemap li ul {
    margin-top: 5px;
  }
  
  .content .list-style.list-sitemap li ul li {
    margin-top: 3px;
    font-weight: 400;
  }
  
  .content .list-style.style-v2 li {
    margin-bottom: 2px;
  }
  
  .content .list-style.style-v2 li:before {
    color: #a5abb2;
    font-size: 6px;
  }
  
  .carousel {
    background: rgba(0, 0, 0, 0) url("./img/0.jpg") repeat scroll 0 0;
    -webkit-background-size: cover;
    background-size: cover;
    color: white;
    /* border-radius: 10px !important; */
  }
  
  .carousel-inner {
    display: flex;
    align-items: center;
    height: 600px;
    /* background-color: #23262b; */
    background: rgba(0, 0, 0, 0) url("../../img/Gallery/slider.jpg") repeat scroll 0 0;
    -webkit-background-size: cover;
    background-size: cover;
  }
  
  .carousel-indicators li {
    background-color: white;
  }
  
  .carousel-indicators .active {
    background-color: white;
  }
  
  .carousel-item {
    height: 100% !important;
  }
  
  /* Center the images */
  .carousel-item img {
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
    ;
    width: auto !important;
    margin: auto;
    display: block;
    /* border-radius: 20px !important; */
  }
  
  
  .justify-content-center {
    justify-content: center;
  }
  
  .auto-logo {
    display: none;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5 {
    color: #000;
  }
  
  .border-radius {
    border-radius: 10px;
  }
  
  .border-radius img {
    border-radius: 20px !important;
  }
  
  .ul-style {}
  
  .ul-style li .icofont {
    font-size: 15px;
    line-height: 4;
    color: #f39c12;
  }
  
  .faq-area {
    color: #000;
  }
  
  .faq-area h5 {
    color: #000;
  }
  
  .padding-lr {
    padding: 20px 60px;
  }
  
  .padding--lr {
    padding: 10px 30px;
  }
  
  /* ----------- */
  
  .logo-text {
    color: #f39c12;
    font-weight: 800;
    text-transform: uppercase;
    font-family: "Lato";
  }
  
  .page-feedback-area {
    background-image: url("img/section-bg/feedback.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 270px 0 150px;
  }
  
  .page-gallery-area {
    background-image: url("img/section-bg/gallery.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 270px 0 150px;
  }
  
  .page-faq-area {
    background-image: url("img/section-bg/faq.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 270px 0 150px;
  }
  
  .page-pricing-area {
    background-image: url("img/section-bg/price.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 270px 0 150px;
  }
  .hearo-area {
    background-image: url("img/slider/background.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 500px 0 150px;
  }
  .page-banner-contact-area {
    background-image: url("img/section-bg/contact.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 270px 0 150px;
  }
  
  .page-banner {}
  
  .page-banner h1 {
    color: #fff;
    display: block;
    font-size: 36px;
    font-weight: 900;
    line-height: 33px;
    margin-bottom: 0;
    text-transform: uppercase;
  }
  
  .page-banner.text-left h1 {
    float: left;
  }
  
  .page-banner.text-right h1 {
    float: right;
  }
  
  .page-banner ul {
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
  }
  
  .page-banner.text-left ul {
    float: right;
  }
  
  .page-banner.text-right ul {
    float: left;
  }
  
  .page-banner ul li {
    display: block;
    float: left;
    padding: 0 6px;
    position: relative;
  }
  
  .page-banner ul li:first-child {
    padding-left: 0;
  }
  
  .page-banner ul li:last-child {
    padding-right: 0;
  }
  
  .page-banner ul li+li::before {
    color: #fff;
    content: "/";
    display: block;
    left: -3px;
    line-height: 9px;
    overflow: hidden;
    position: absolute;
    top: 0;
  }
  
  .page-banner ul li a,
  .page-banner ul li span {
    color: #fff;
    display: block;
    font-size: 12px;
    line-height: 9px;
    text-transform: uppercase;
  }
  
  .page-banner ul li a:hover {
    color: #f39c12;
  }
  
  /*-------------------------- 
      2. Feature Area
  --------------------------*/
  .feature-wrapper {}
  
  .feature-left {}
  
  .feature-right {}
  
  /* Feature Image */
  .feature-image {
    z-index: 9;
  }
  
  /* Single Feature */
  .single-feature {
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 1;
  }
  
  .single-feature:nth-child(1) {
    padding: 15px 0 14px;
  }
  
  .single-feature:nth-child(2) {
    padding: 15px 0;
  }
  
  .single-feature:nth-child(3) {
    padding: 15px 0;
  }
  
  /* Single Feature Hover */
  .single-feature:hover {
    /* background-color: #fff; */
  }
  
  .single-feature::before {
    /* background-color: #fff; */
    bottom: 0;
    content: "";
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50%;
    z-index: -1;
  }
  
  .single-feature:hover::before {
    opacity: 1;
  }
  
  .feature-left .single-feature::before {
    left: 100%;
  }
  
  .feature-right .single-feature::before {
    Right: 100%;
  }
  
  /* Left Single Feature */
  .feature-left .single-feature {
    margin-right: 20px;
  }
  
  .feature-left .single-feature:nth-child(2) {
    margin-left: 0;
    padding-right: 0;
  }
  
  /* Right Single Feature */
  .feature-right .single-feature {
    margin-left: 20px;
  }
  
  .feature-right .single-feature:nth-child(2) {
    margin-right: -15px;
    padding-left: 0;
  }
  
  /* Featue Icon */
  .single-feature .icon {
    display: block;
    /* margin-top: 19px; */
    min-width: 36px;
  }
  
  .feature-left .icon {
    float: left;
    padding-right: 10px;
    text-align: left;
  }
  
  .feature-right .icon {
    float: left;
    margin-right: 10px;
    text-align: right;
  }
  
  .single-feature .icon i {
    color: #f39c12;
    font-size: 36px;
    display: block;
  }
  
  /* Feature Text */
  .single-feature .text {
    text-align: justify;
  }
  
  .single-feature .text h4 {
    font-size: 18px;
    margin-bottom: 9px;
  }
  
  .single-feature .text p {}
  
  /*-------------------------- 
      3. Course Area
  --------------------------*/
  .course-wrapper {}
  
  .course-item {
    background: rgba(0, 0, 0, 0) url("img/shape/course/course-color.png") no-repeat scroll center center;
    /* background-image: url(""); */
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
    padding: 34px 25px 40px;
    position: relative;
    transition: all 1s ease 0s;
    z-index: 1;
    color: white;
  }
  
  .course-item i {
    color: #fff;
    display: inline-block;
    font-size: 48px;
    margin-bottom: 18px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .course-item .h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 19px;
    padding-bottom: 19px;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #fff;
  }
  
  .course-item .h4::before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    width: 50px;
  }
  
  .course-item p {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  /* Course Hover */
  .course-item:hover {
    background-image: url("img/shape/course/course-white.png");
  
    /* background: rgba(0, 0, 0, 0) url("img/shape/course/course-white.png") no-repeat scroll center center; */
    /* transform: rotate(360deg); */
  }
  
  .course-item:hover i {
    color: #f39c12;
  }
  
  .course-item:hover .h4 {
    color: #f39c12;
  }
  
  .course-item:hover .h4::before {
    background-color: #f39c12;
  }
  
  .course-item:hover p {
    color: #f39c12;
  }
  
  
  /* item 2----------------------------------- */
  .course-item-2 {
    background: rgba(0, 0, 0, 0) url("img/shape/course/course-color-7.png") no-repeat scroll center center;
    /* background-image: url(""); */
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
    padding: 34px 25px 40px;
    position: relative;
    transition: all 1s ease 0s;
    z-index: 1;
    color: white;
  }
  
  .course-item-2 i {
    color: #fff;
    display: inline-block;
    font-size: 48px;
    margin-bottom: 18px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .course-item-2 .h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 19px;
    padding-bottom: 19px;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #fff;
  }
  
  .course-item-2 .h4::before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    width: 50px;
  }
  
  .course-item-2 p {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  /* Course Hover */
  .course-item-2:hover {
    background-image: url("img/shape/course/course-white.png");
  
    /* background: rgba(0, 0, 0, 0) url("img/shape/course/course-white.png") no-repeat scroll center center; */
    /* transform: rotate(360deg); */
  }
  
  .course-item-2:hover i {
    color: #ff1744;
  }
  
  .course-item-2:hover .h4 {
    color: #ff1744;
  }
  
  .course-item-2:hover .h4::before {
    background-color: #ff1744;
  }
  
  .course-item-2:hover p {
    color: #ff1744;
  }
  
  /* item 3----------------------------------- */
  .course-item-3 {
    background: rgba(0, 0, 0, 0) url("img/shape/course/course-color-3.png") no-repeat scroll center center;
    /* background-image: url(""); */
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
    padding: 34px 25px 40px;
    position: relative;
    transition: all 1s ease 0s;
    z-index: 1;
    color: white;
  }
  
  .course-item-3 i {
    color: #fff;
    display: inline-block;
    font-size: 48px;
    margin-bottom: 18px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .course-item-3 .h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 19px;
    padding-bottom: 19px;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #fff;
  }
  
  .course-item-3 .h4::before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    width: 50px;
  }
  
  .course-item-3 p {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  /* Course Hover */
  .course-item-3:hover {
    background-image: url("img/shape/course/course-white.png");
  
    /* background: rgba(0, 0, 0, 0) url("img/shape/course/course-white.png") no-repeat scroll center center; */
    /* transform: rotate(360deg); */
  }
  
  .course-item-3:hover i {
    color: #4caf50;
  }
  
  .course-item-3:hover .h4 {
    color: #4caf50;
  }
  
  .course-item-3:hover .h4::before {
    background-color: #4caf50;
  }
  
  .course-item-3:hover p {
    color: #4caf50;
  }
  
  
  /* item 4----------------------------------- */
  .course-item-4 {
    background: rgba(0, 0, 0, 0) url("img/shape/course/course-color-6.png") no-repeat scroll center center;
    /* background-image: url(""); */
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
    padding: 34px 25px 40px;
    position: relative;
    transition: all 1s ease 0s;
    z-index: 1;
    color: white;
  }
  
  .course-item-4 i {
    color: #fff;
    display: inline-block;
    font-size: 48px;
    margin-bottom: 18px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .course-item-4 .h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 19px;
    padding-bottom: 19px;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #fff;
  }
  
  .course-item-4 .h4::before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    width: 50px;
  }
  
  .course-item-4 p {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  /* Course Hover */
  .course-item-4:hover {
    background-image: url("img/shape/course/course-white.png");
  
    /* background: rgba(0, 0, 0, 0) url("img/shape/course/course-white.png") no-repeat scroll center center; */
    /* transform: rotate(360deg); */
  }
  
  .course-item-4:hover i {
    color: #006064;
  }
  
  .course-item-4:hover .h4 {
    color: #006064;
  }
  
  .course-item-4:hover h4::before {
    background-color: #006064;
  }
  
  .course-item-4:hover p {
    color: #006064;
  }
  
  /* item 5----------------------------------- */
  .course-item-5 {
    background: rgba(0, 0, 0, 0) url("img/shape/course/course-color-2.png") no-repeat scroll center center;
    /* background-image: url(""); */
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
    padding: 34px 25px 40px;
    position: relative;
    transition: all 1s ease 0s;
    z-index: 1;
    color: white;
  }
  
  .course-item-5 i {
    color: #fff;
    display: inline-block;
    font-size: 48px;
    margin-bottom: 18px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .course-item-5 .h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 19px;
    padding-bottom: 19px;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #fff;
  }
  
  .course-item-5 .h4::before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    width: 50px;
  }
  
  .course-item-5 p {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  /* Course Hover */
  .course-item-5:hover {
    background-image: url("img/shape/course/course-white.png");
  
    /* background: rgba(0, 0, 0, 0) url("img/shape/course/course-white.png") no-repeat scroll center center; */
    /* transform: rotate(360deg); */
  }
  
  .course-item-5:hover i {
    color: #2395ec;
  }
  
  .course-item-5:hover .h4 {
    color: #2395ec;
  }
  
  .course-item-5:hover .h4::before {
    background-color: #2395ec;
  }
  
  .course-item-5:hover p {
    color: #2395ec;
  }
  
  /*--------------------------
      4. Video Area
  --------------------------*/
  .video-area {
    background: rgba(0, 0, 0, 0) url("img/section-bg/video.jpg") repeat scroll 0 0;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 195px 0;
  }
  
  .video-content {}
  
  .video-content a {
    color: #ffffff;
    display: inline-block;
  }
  
  .video-content a:hover {
    color: #f39c12;
  }
  
  .video-content a i {
    display: block;
    font-size: 60px;
  }
  
  .video-content h3 {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 18px;
    margin: 30px 0 0;
    text-transform: uppercase;
  }
  
  /*--------------------------
      5. Instructor Area
  --------------------------*/
  .instructor-details {}
  
  .instructor-name {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .instructor-title {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  
  .instructor-details p {
    margin-bottom: 17px;
  }
  
  .instructor-social {
    display: flex;
    justify-content: center;
  }
  
  .instructor-social #social {
    border-radius: 20px !important;
  }
  
  .instructor-social a {
    color: #333;
    display: block;
    float: left;
    height: 35px;
    margin-right: 15px;
    text-align: center;
    width: 35px;
  }
  
  .instructor-social a i {
    display: block;
    font-size: 18px;
    line-height: 33px;
  }
  
  /* .instructor-social a:hover {
    background-color: #f39c12;
    border-color: #f39c12;
    color: #fff;
  } */
  
  .instructor-image {
    margin-top: 74px;
  }
  
  .instructor-image img {
    width: 100%;
  }
  
  /* Instructor Tab List */
  .instructor-tab-list {
    float: left;
    margin-top: -127px;
  }
  
  .instructor-tab-list li {
    display: block;
    float: left;
    margin-right: 30px;
    padding-bottom: 12px;
    width: 115px;
  }
  
  .instructor-tab-list li:last-child {
    margin-right: 0;
  }
  
  .instructor-tab-list li a {
    display: block;
    position: relative;
  }
  
  .instructor-tab-list li a::before {
    background-color: #000;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .instructor-tab-list li a:hover::before,
  .instructor-tab-list li.active a::before {
    opacity: 0.5;
  }
  
  .instructor-tab-list li a::after {
    background-color: #dddddd;
    border-radius: 50%;
    bottom: -12px;
    content: "";
    height: 2px;
    left: 10px;
    opacity: 0;
    position: absolute;
    right: 10px;
  }
  
  .instructor-tab-list li a:hover::after,
  .instructor-tab-list li.active a::after {
    opacity: 1;
  }
  
  .instructor-tab-list li a img {
    width: 100%;
  }
  
  /*--------------------------
      6. FAQ Area
  --------------------------*/
  .faq-image {
    margin-top: 75px;
  }
  
  .faq-image img {
    width: 100%;
  }
  
  /*--------------------------
      7. Call To Action Area
  --------------------------*/
  .cta-area {
    background-color: #f39c12;
  }
  
  .cta-area p {
    margin-top: 5px;
    color: white;
  }
  
  .call-to-action {}
  
  .call-to-action h3 {
    color: #fff;
    display: block;
    float: left;
    font-weight: 600;
    line-height: 36px;
    margin: 0;
    text-transform: uppercase;
  }
  
  
  .call-to-action a {
    float: right;
  }
  
  /*--------------------------
      8. Contact Area
  --------------------------*/
  
  .bold h1 {
    color: #fff;
    display: block;
    float: left;
    font-weight: 900;
    line-height: 50px;
    margin: 5px 0;
    text-transform: uppercase;
  }
  
  .bold h3 {
    font-size: 23px !important;
    margin: 10px 0;
  }
  
  #contact-map {
    height: 530px;
  }
  
  .contact-info {}
  
  .contact-info .single-info {}
  
  .contact-info .single-info+.single-info {
    margin-top: 45px;
  }
  
  .contact-info .single-info .icon {
    background-color: #f39c12;
    border-radius: 2px;
    color: #fff;
    display: block;
    float: left;
    height: 44px;
    margin-left: 10px;
    margin-right: 40px;
    margin-top: 10px;
    text-align: center;
    transform: rotate(45deg);
    width: 44px;
    border-radius: 15px;
  }
  
  .contact-info .single-info .icon i {
    display: block;
    font-size: 24px;
    line-height: 44px;
    transform: rotate(-45deg);
  }
  
  .contact-info .single-info .content {}
  
  .contact-info .single-info .content .h6 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 11px;
    text-transform: uppercase;
  }
  
  .contact-info .single-info .content p {}
  
  .contact-info .single-info .content p a {
    display: block;
  }
  
  .contact-info .single-info .content p a:hover {
    color: #f39c12;
  }
  
  .contact-image img {
    width: 1000px !important;
    height: 200px !important;
    object-fit: cover;
  }
  
  /*--------------------------
      9. Dark Version Style
  --------------------------*/
  .dark-wrapper .bg-white,
  .dark-wrapper.bg-white {
    background-color: #1e2127;
  }
  
  .dark-wrapper .bg-gray,
  .dark-wrapper.bg-gray {
    background-color: #252830;
  }
  
  .dark-wrapper .overlay-white::before,
  .dark-wrapper.overlay-white::before {
    background-color: #000;
  }
  
  .dark-wrapper p,
  .dark-wrapper span {
    color: #d0d0d0;
  }
  
  .dark-wrapper h1,
  .dark-wrapper h2,
  .dark-wrapper h3,
  .dark-wrapper h4,
  .dark-wrapper h5,
  .dark-wrapper h6,
  .dark-wrapper a {
    color: #fff;
  }
  
  .dark-wrapper .section-title::before,
  .dark-wrapper .section-title::after {
    background-color: #444;
  }
  
  /* Course Form */
  .dark-wrapper .find-course-form h5 span {
    color: #555555;
  }
  
  /* Feature */
  .dark-wrapper .single-feature:hover {
    background-color: #1e2127;
  }
  
  .dark-wrapper .single-feature::before {
    background-color: #1e2127;
  }
  
  /* Funfact */
  .dark-wrapper .single-facts i {
    color: #d0d0d0;
  }
  
  .dark-wrapper .single-facts h1::before {
    background-color: #d0d0d0;
  }
  
  /* Course */
  .dark-wrapper .course-item {
    background-image: url("img/shape/course/course-dark.png");
  }
  
  /* Gallery */
  .dark-wrapper .gallery-filter button::before,
  .dark-wrapper .gallery-filter button::after {
    background-color: #d0d0d0;
  }
  
  .dark-wrapper .gallery-filter button {
    color: #d0d0d0;
  }
  
  /* Testimonial */
  .dark-wrapper .ts-arrows {
    color: #fff;
  }
  
  /* FAQ */
  .dark-wrapper .panel-group .panel {
    background-color: #252830;
  }
  
  /* Blog */
  .dark-wrapper .blog-item .meta p {
    color: #d0d0d0;
  }
  
  .dark-wrapper .blog-item .title a {
    color: #fff;
  }
  
  .dark-wrapper .category-sidebar ul li a {
    color: #fff;
  }
  
  /* Contact */
  .dark-wrapper .form .input input[type="text"],
  .dark-wrapper .form .input input[type="email"],
  .dark-wrapper .form .input input[type="tel"],
  .dark-wrapper .form .input input[type="password"],
  .dark-wrapper .form .input input[type="search"],
  .dark-wrapper .form .input input[type="url"],
  .dark-wrapper .form .input textarea {
    color: #fff;
  }
  
  /* Other */
  .dark-wrapper .pagination ul li a {
    color: #fff;
  }