/********** Template CSS **********/
:root {
    --primary: #F3BD00;
    --secondary: #757575;
    --light: #F3F6F8;
    --dark: #0C2B4B;
}

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-outline-primary:hover {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand,
.navbar a.btn {
    height: 80px
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: var(--dark);
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

/* Added this so it'll be h2 on larger screens and h5 on smaller screens for our navbar brand */
/* Default styles for h2 and h5 */
.navbar-brand h2,
.navbar-brand h5 {
    display: none;
}

/* Display h2 on larger screens */
@media (min-width: 991.99px) {
    .navbar-brand h2 {
        display: block;
    }
}

/* Display h5 on smaller screens */
@media (max-width: 991.98px) {
    .navbar-brand h5 {
        display: block;
    }
}

@media (max-width: 991.98px) { /* this means the navbar will be collapsed for screens smaller than 992px */
    .navbar-toggler{padding:.1rem .3rem;font-size:1;} /* Adjust the padding and font size of the navbar-toggler icon */
    .px-4{padding-right:.25rem !important;padding-left:0.5rem !important} /* Adjust the padding of the navbar-toggler button TODO: Not working for some reason so I had to manually override in the actual bootstrap.min.css file which is not ideal */
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, .75);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--primary);
    border: 10px solid var(--primary);
}

/* it is a must to have this for mobile devices, otherwise the carousel will not look nice */
@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%; /* Fill the width of the carousel item */
        height: 100%; /* Fill the height of the carousel item */
        object-fit: cover; /* Scale the image to cover the carousel item, cropping if necessary */
    }
}

/* Styles for larger screens */
/* Adjusted this height for monitors but laptop screens won't have forced enlarged height 1070px images. Tablets or smaller laptops might have buttons going up and down though, but very very slightly. Not worth locking the height to that size for tablets for aesthetic reasons even if it deals with the button issue */
/* Keeping it commented out because the cropped images are almost perfect anyways, so a little movement of the buttons and not being perfectly alighned is fine if it means a more pleasant and aesthetic look to the carousel on any device. */
/* @media (min-width: 1700px) {
    #header-carousel .carousel-item {
        position: relative;
        height: 1070px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
} */

.page-header {
    background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #999999;
}


/*** Facts ***/
@media (min-width: 991.98px) {
    .facts {
        position: relative;
        margin-top: -75px;
        z-index: 1;
    }
}


/*** Courses ***/
.courses {
    min-height: 100vh;
    background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url(../img/carousel-1.jpg) center center no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.driving-courses-item .driving-courses-overlay {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.driving-courses-item:hover .driving-courses-overlay {
    height: 100%;
    opacity: 1;
}


/*** Team ***/
.team-items {
    margin: -.75rem;
}

.team-item {
    padding: .75rem;
}

.team-item img {
    /*height: 350px; /* Adjust the height as needed */
    /*width: 100%; /* This will make the image take full width of the container */
    /*object-fit: cover; /* This prevents the image from stretching */
    /*object-position: center; /* This will center the image within the frame */
}

.team-item::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #FFFFFF;
    transition: .5s;
    z-index: -1;
}

.team-item:hover::after {
    height: 100%;
    background: var(--primary);
}

.team-item .team-social {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .75);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.team-item:hover .team-social {
    height: 100%;
    opacity: 1;
}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
    height: 40px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid var(--primary);
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 40px;
    height: 40px;
    background: var(--primary);
}

.testimonial-carousel .owl-item img {
    width: 150px;  /* Fixed width */
    height: 150px; /* Fixed height */
    object-fit: cover; /* This will prevent the image from stretching */
    object-position: center; /* Center the image within the frame */
    /* border-radius: 50%; To maintain the rounded circle shape */
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--light);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--light);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.language-switcher {
    flex-wrap: wrap;
}

.language-switcher .btn {
    min-width: 48px;
    border-radius: 999px;
}

.language-switcher .btn.active {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}

.newsletter-status {
    line-height: 1.5;
    opacity: .9;
}

.copyright {
    background: #092139;
}

.copyright a {
    color: var(--primary);
}

.copyright a:hover {
    color: var(--light);
}


/* Contact Form Error Messages */
.help-block {
  color: #ff0000; /* Red color for error messages */
  margin-top: 5px;
}

/* This will style the unordered list within the help-block class used for error messages */
.help-block ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* This will style each list item within the help-block class used for error messages */
.help-block li {
  font-size: 14px;
}

/* Styling for individual form control validation state */
.form-control.is-invalid,
.form-control.is-valid {
  border-color: #ff0000;
  /* Add other styling like box-shadow if needed */
}

/* Styling for valid input fields, optional if you want to highlight valid fields */
.form-control.is-valid {
  border-color: #28a745; /* Bootstrap success color */
}

/* You may also want to style the validation message for the valid state */
.valid-feedback {
  color: #28a745; /* Bootstrap success color */
}