/********** Template CSS **********/

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    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-family: 'Anton', sans-serif;
    text-transform: uppercase;
    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 .navbar-brand,
.navbar .navbar-phone {
    height: 75px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: var(--bs-dark);
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    outline: none;
}

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

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

@media (max-width: 991.98px) {
    .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 ***/
.owl-carousel-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .35);
}

/* Fixed-height slides at every breakpoint so different-sized banner
   images never push the overlay text taller than the slide (which is
   what causes the text to spill over / overlap the section below). */
.header-carousel .owl-carousel-item {
    position: relative;
    min-height: 650px;
}

.header-carousel .owl-carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        min-height: 500px;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 16px !important;
    }
}

/* Banner 2: photo already has a "Super Fast" text panel baked in the
   middle, so this slide's heading is kept compact and pushed into the
   clear strip on the right instead of the full-width display-1 style. */
.banner2-text h1 {
    font-size: 2.1rem;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

.banner2-text p {
    font-size: 1rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

@media (min-width: 992px) {
    .banner2-text {
        width: 24%;
    }

    .banner2-text h1 {
        font-size: 2.1rem;
    }
}

@media (max-width: 768px) {
    /* Below ~768px the banner photo's "Super Fast" panel is scaled to
       fill the full slide width (no clear strip on either side), so the
       text is moved below the panel instead of to the side. */
    .banner2-slide {
        min-height: 660px !important;
    }

    .banner2-slide .owl-carousel-inner {
        align-items: flex-end;
        padding-bottom: 30px;
    }

    .banner2-text p {
        display: none;
    }

    .banner2-slide .row {
        justify-content: center !important;
    }

    .banner2-text {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .banner2-text h1 {
        font-size: 1.35rem;
    }

    .banner2-text p {
        font-size: .88rem !important;
    }

    .banner2-text .btn {
        font-size: .75rem;
        padding: .4rem .9rem !important;
    }
}


/*** About ***/
@media (min-width: 992px) {
    .container.about {
        max-width: 100% !important;
    }

    .about-text  {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .about-text  {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .about-text  {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Service ***/
.service-item {
    position: relative;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}


/*** Feature ***/
@media (min-width: 992px) {
    .container.feature {
        max-width: 100% !important;
    }

    .feature-text  {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .feature-text  {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .feature-text  {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Project Portfolio ***/
.portfolio-inner {
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.portfolio-img {
    position: relative;
}

.portfolio-cat {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 24px;
    background: rgba(255, 255, 255, .7);
    z-index: 1;
}


/*** Quote ***/
@media (min-width: 992px) {
    .container.quote {
        max-width: 100% !important;
    }

    .quote-text  {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .quote-text  {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .quote-text  {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


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

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

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

.footer .copyright {
    padding: 25px 0;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

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

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