/* Fonts */
:root { --font-default: 'Roboto', sans-serif; --font-primary: 'Roboto', sans-serif; --font-secondary: 'Roboto', sans-serif; }

/* Colors */
:root { --color-default: #0a0d13; --color-primary: #0d42ff; --color-secondary: #0e1d34; }

/* Smooth scroll behavior */
:root { scroll-behavior: smooth; }

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body { font-family: var(--font-default); color: var(--color-default); }

a { color: var(--color-primary); text-decoration: none; }

    a:hover { color: #406aff; text-decoration: none; }

h1,
h2,
h3,
h4,
h5,
h6 { font-family: var(--font-primary); }

p { color: #444; }

.text-justify { text-align: justify; }
.font-400 { font-weight: 400; }
/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section { padding-bottom: 50px; overflow: hidden; }

.section-header { text-align: center; padding: 30px 0; position: relative; }

    .section-header h2 { font-size: 32px; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 0; color: #001973; position: relative; z-index: 2; margin-bottom: 20px; padding-bottom: 20px; position: relative; }

        .section-header h2:after { content: ""; position: absolute; display: block; width: 50px; height: 3px; background: var(--color-primary); left: 0; right: 0; bottom: 0; margin: auto; }

    .section-header span { position: absolute; top: 46px; color: rgba(14, 29, 52, 0.06); left: 0; right: 0; z-index: 1; font-weight: 700; font-size: 56px; text-transform: uppercase; line-height: 0; }

    .section-header p { margin-bottom: 0; position: relative; z-index: 2; }

@media (max-width: 640px) {
    .section-header h2 { font-size: 28px; margin-bottom: 15px; }

    .section-header span { font-size: 38px; }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs .page-header { padding: 140px 0 80px 0; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }

    .breadcrumbs .page-header:before { content: ""; background-color: rgba(14, 29, 52, 0.8); position: absolute; inset: 0; }

    .breadcrumbs .page-header h2 { font-size: 56px; font-weight: 500; color: #fff; font-family: var(--font-secondary); }

    .breadcrumbs .page-header p { color: rgba(255, 255, 255, 0.8); }

.breadcrumbs nav { padding: 20px 0; margin-top: 20px; }

    .breadcrumbs nav ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 16px; font-weight: 400; color: #999; }

        .breadcrumbs nav ol a { color: #303d6f; transition: 0.3s; }

            .breadcrumbs nav ol a:hover { text-decoration: underline; }

        .breadcrumbs nav ol li + li { padding-left: 10px; }

            .breadcrumbs nav ol li + li::before { display: inline-block; padding-right: 10px; color: #000; font-weight: 400; content: ">"; }

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: 15px; z-index: 99999; background: #323a62; width: 40px; height: 40px; border-radius: 4px; transition: all 0.4s; }

    .scroll-top i { font-size: 24px; color: #fff; line-height: 0; }

    .scroll-top:hover { background: rgb(48 56 93); color: #fff; }

    .scroll-top.active { visibility: visible; opacity: 1; }

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #fff; transition: all 0.6s ease-out; width: 100%; height: 100vh; }

    #preloader:before,
    #preloader:after { content: ""; position: absolute; border: 4px solid var(--color-primary); border-radius: 50%; animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite; }

    #preloader:after { animation-delay: -0.5s; }

@keyframes animate-preloader {
    0% { width: 10px; height: 10px; top: calc(50% - 5px); left: calc(50% - 5px); opacity: 1; }

    100% { width: 72px; height: 72px; top: calc(50% - 36px); left: calc(50% - 36px); opacity: 0; }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] { transition-delay: 0 !important; }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header { transition: all 1s; z-index: 997; padding: 0; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; background: #fff; }

    .header.sticked { background: #fff; padding: 0; box-shadow: 0px 2px 20px rgba(14, 29, 52, 0.7); position: fixed; top: 0; right: 0; left: 0; z-index: 1030; opacity: .9; }

.header-carousel .owl-nav { position: absolute; top: 50%; right: 8%; transform: translateY(-50%); display: flex; flex-direction: column; }

    .header-carousel .owl-nav .owl-prev,
    .header-carousel .owl-nav .owl-next { margin: 7px 0; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: transparent; border: 1px solid #FFFFFF; border-radius: 45px; font-size: 22px; transition: .5s; }

        .header-carousel .owl-nav .owl-prev:hover,
        .header-carousel .owl-nav .owl-next:hover { background: #ffffff; border-color: #fff; color: #000; }

.owl-carousel .owl-stage-outer { height: 500px; }
/*.header .logo img {
  max-height: 40px;
  margin-right: 6px;
}*/
.header .logo h1 { font-size: 30px; margin: 0; font-weight: 700; color: #fff; font-family: var(--font-primary); }

/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
@media (min-width: 1025px) {
    .navbar { padding: 0; }

        .navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; }

        .navbar li { position: relative; margin-right: 5px; }

        .navbar a,
        .navbar a:focus { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 8px 30px; font-family: var(--font-primary); font-size: 15px; font-weight: 500; color: #333; white-space: nowrap; transition: 0.3s; }

            .navbar a i,
            .navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; }

        /*.navbar a:hover,
            .navbar .active,
            .navbar .active:focus,
            .navbar li:hover > a {
                color: #d6893b;
            }*/
        /*.navbar .active:focus, .navbar .active:after {
            background: #303d6f;
            color: #fff !important;
            content: '';
            height: 38px;
            width: 71px;
            opacity: 1;
        }*/

        .navbar .get-a-quote,
        .navbar .get-a-quote:focus { background: var(--color-primary); padding: 8px 20px; margin-left: 30px; border-radius: 4px; color: #fff; }

            .navbar .get-a-quote:hover,
            .navbar .get-a-quote:focus:hover { color: #fff; background: #2756ff; }

        .navbar .dropdown ul { display: block; position: absolute; left: 0px; top: calc(100% + 30px); margin: 0; padding: 10px 0; z-index: 99; opacity: 0; visibility: hidden; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: 0.3s; border-radius: 4px; border-top: 3px solid #2e3b65; top: 50px !important; }

            .navbar .dropdown ul li { min-width: 200px; }

            .navbar .dropdown ul a { padding: 10px 20px; font-size: 15px; text-transform: none; font-weight: 400; color: var(--color-secondary); }

                .navbar .dropdown ul a i { font-size: 12px; }

                .navbar .dropdown ul a:hover,
                .navbar .dropdown ul .active:hover,
                .navbar .dropdown ul li:hover > a { color: #fff; }

        .navbar .dropdown:hover > ul { opacity: 1; top: 100%; visibility: visible; }

        .navbar .dropdown .dropdown ul { top: 0; left: calc(100% - 30px); visibility: hidden; }

        .navbar .dropdown .dropdown:hover > ul { opacity: 1; top: 0; left: 100%; visibility: visible; }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .navbar .dropdown .dropdown ul { left: -90%; }

    .navbar .dropdown .dropdown:hover > ul { left: -100%; }
}

@media (min-width: 1025px) {

    .mobile-nav-show,
    .mobile-nav-hide { display: none; }
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width: 1024px) {
    .navbar { position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px; bottom: 0; transition: 0.3s; z-index: 9997; }

        .navbar ul { position: absolute; inset: 0; padding: 50px 0 10px 0; margin: 0; background: rgba(14, 29, 52, 0.9); overflow-y: auto; transition: 0.3s; z-index: 9998; }

        .navbar a,
        .navbar a:focus { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; font-family: var(--font-primary); font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.7); white-space: nowrap; transition: 0.3s; }

            .navbar a i,
            .navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; }

            .navbar a:hover,
            .navbar .active,
            .navbar .active:focus,
            .navbar li:hover > a { color: #fff; }

        .navbar .get-a-quote,
        .navbar .get-a-quote:focus { background: var(--color-primary); padding: 8px 20px; border-radius: 4px; margin: 15px; color: #fff; }

            .navbar .get-a-quote:hover,
            .navbar .get-a-quote:focus:hover { color: #fff; background: rgba(13, 66, 255, 0.8); }

        .navbar .dropdown ul,
        .navbar .dropdown .dropdown ul { position: static; display: none; padding: 10px 0; margin: 10px 20px; transition: all 0.5s ease-in-out; border: 1px solid #fff; }

        .navbar .dropdown > .dropdown-active,
        .navbar .dropdown .dropdown > .dropdown-active { display: block; }

    .mobile-nav-show { color: #2e3b65; font-size: 38px; cursor: pointer; line-height: 0; transition: 0.5s; z-index: 0; margin-right: 10px; }

    .mobile-nav-hide { color: #fff; font-size: 32px; cursor: pointer; line-height: 0; transition: 0.5s; position: fixed; right: 20px; top: 20px; z-index: 9999; }

    .mobile-nav-active { overflow: hidden; }

        .mobile-nav-active .navbar { right: 0; }

            .mobile-nav-active .navbar:before { content: ""; position: fixed; inset: 0; background: rgba(14, 29, 52, 0.8); z-index: 9996; }
}

/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services .service-item { position: relative; height: 100%; margin-bottom: 20px; }

    .featured-services .service-item .icon { margin-right: 20px; }

        .featured-services .service-item .icon i { color: #001f8d; font-size: 48px; transition: 0.3s; }

    .featured-services .service-item:hover .icon { background: #fff; }

        .featured-services .service-item:hover .icon i { color: var(--color-primary); }

    .featured-services .service-item .title { font-weight: 700; margin-bottom: 10px; font-size: 20px; color: var(--color-secondary); transition: 0.3s; }

    .featured-services .service-item .description { font-size: 15px; color: #132848; margin-bottom: 10px; }

    .featured-services .service-item .readmore { display: flex; align-items: center; color: var(--color-secondary); transition: 0.3s; font-weight: 700; font-size: 14px; }

        .featured-services .service-item .readmore i { margin-left: 8px; }

    .featured-services .service-item:hover .title,
    .featured-services .service-item:hover .readmore,
    .featured-services .service-item:hover .icon i { color: var(--color-primary); }

/*--------------------------------------------------------------
# About Us Section
--------------------------------------------------------------*/
.about .content h3 { font-weight: 700; font-size: 32px; font-family: var(--font-secondary); color: #001f8d; }

.about .content ul { list-style: none; padding: 0; }

    .about .content ul li { display: flex; align-items: flex-start; margin-top: 40px; }

    .about .content ul i { flex-shrink: 0; font-size: 48px; color: var(--color-primary); margin-right: 20px; line-height: 0; }

    .about .content ul h5 { font-size: 18px; font-weight: 700; color: #19335c; }

    .about .content ul p { font-size: 15px; }

.about .content p:last-child { margin-bottom: 0; }

.about .play-btn { width: 94px; height: 94px; background: radial-gradient(var(--color-primary) 50%, rgba(13, 66, 255, 0.4) 52%); border-radius: 50%; display: block; position: absolute; left: calc(50% - 47px); top: calc(50% - 47px); overflow: hidden; }

    .about .play-btn:before { content: ""; position: absolute; width: 120px; height: 120px; animation-delay: 0s; animation: pulsate-btn 2s; animation-direction: forwards; animation-iteration-count: infinite; animation-timing-function: steps; opacity: 1; border-radius: 50%; border: 5px solid rgba(13, 66, 255, 0.7); top: -15%; left: -15%; background: rgba(198, 16, 0, 0); }

    .about .play-btn:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-40%) translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; z-index: 100; transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .about .play-btn:hover:before { content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-40%) translateY(-50%); width: 0; height: 0; border: none; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; z-index: 200; animation: none; border-radius: 0; }

    .about .play-btn:hover:after { border-left: 15px solid var(--color-primary); transform: scale(20); }

@keyframes pulsate-btn {
    0% { transform: scale(0.6, 0.6); opacity: 1; }

    100% { transform: scale(1, 1); opacity: 0; }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .card { border: 1px solid rgba(14, 29, 52, 0.15); background: #fff; position: relative; border-radius: 10px; height: 100%; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; padding: 10px; }

    .services .card .card-img { overflow: hidden; margin-bottom: 15px; border-radius: 0; }

        .services .card .card-img img { transition: 0.3s ease-in-out; min-height: 200px; }

    .services .card h3 { font-weight: 400; font-size: 14px; margin-bottom: 0px; padding: 10px 0px; color: #333; overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap; }

    .services .card a { color: #001973; transition: 0.3; }

        .services .card a:hover { color: var(--color-primary); }

    .services .card p { padding: 0; margin-bottom: 10px; color: var(--color-secondary); font-size: 17px; text-align: center; }

    .services .card:hover .card-img img { transform: scale(1.1); }

.service-item { padding: 0 20px 20px 20px; text-align: center; }

    .service-item a.btn-slide { position: relative; display: inline-block; overflow: hidden; font-size: 0; }

        .service-item a.btn-slide i,
        .service-item a.btn-slide span { position: relative; height: 40px; padding: 0 15px; display: inline-flex; align-items: center; font-size: 16px; color: #FFFFFF; background: #343b63; border-radius: 0 35px 35px 0; transition: .5s; z-index: 2; }


        .service-item a.btn-slide span { padding-left: 0; left: -100%; z-index: 1; top: -1px; }

    .service-item:hover a.btn-slide i { border-radius: 0; }

    .service-item:hover a.btn-slide span { left: 0; top: -1px; }

    .service-item a.btn-slide:hover i,
    .service-item a.btn-slide:hover span { background: #09f; }

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action { background: linear-gradient(rgba(14, 29, 52, 0.6), rgba(14, 29, 52, 0.8)), url("../img/cta-bg.jpg") center center; background-size: cover; padding: 100px 0; }

@media (min-width: 1365px) {
    .call-to-action { background-attachment: fixed; }
}

.call-to-action h3 { color: #fff; font-size: 28px; font-weight: 700; }

.call-to-action span { font-size: 48px; display: block; color: #fff; font-weight: 700; }

.call-to-action p { font-size: 16px; font-weight: 700; color: #fff; opacity: 0.6; }

.call-to-action .cta-btn { font-family: var(--font-primary); font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 12px 40px; border-radius: 5px; transition: 0.5s; margin: 10px; border: 2px solid #fff; color: #fff; }

    .call-to-action .cta-btn:hover { background: var(--color-primary); border: 2px solid var(--color-primary); }

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features { padding-top: 70px; }

    .features .features-item + .features-item { margin-top: 100px; }

@media (max-width: 640px) {
    .features .features-item + .features-item { margin-top: 40px; }
}

.features .features-item h3 { font-weight: 600; font-size: 26px; color: #001973; }

.features .features-item ul { list-style: none; padding: 0; }

    .features .features-item ul li { padding-bottom: 10px; }

        .features .features-item ul li:last-child { padding-bottom: 0; }

    .features .features-item ul i { font-size: 20px; padding-right: 4px; color: var(--color-primary); }

.features .features-item p:last-child { margin-bottom: 0; }

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item { padding: 60px 40px; box-shadow: 0 3px 20px -2px rgba(108, 117, 125, 0.15); background: #fff; height: 100%; border-top: 4px solid #fff; border-radius: 5px; }

.pricing h3 { font-weight: 600; margin-bottom: 15px; font-size: 20px; color: var(--color-secondary); }

.pricing h4 { font-size: 48px; color: var(--color-primary); font-weight: 400; font-family: var(--font-primary); margin-bottom: 25px; }

    .pricing h4 sup { font-size: 28px; }

    .pricing h4 span { color: rgba(108, 117, 125, 0.8); font-size: 18px; }

.pricing ul { padding: 20px 0; list-style: none; color: #6c757d; text-align: left; line-height: 20px; }

    .pricing ul li { padding: 10px 0; display: flex; align-items: center; }

    .pricing ul i { color: #059652; font-size: 24px; padding-right: 3px; }

    .pricing ul .na { color: rgba(108, 117, 125, 0.5); }

        .pricing ul .na i { color: rgba(108, 117, 125, 0.5); }

        .pricing ul .na span { text-decoration: line-through; }

.pricing .buy-btn { display: inline-block; padding: 12px 35px; border-radius: 4px; color: var(--color-primary); transition: none; font-size: 16px; font-weight: 500; font-family: var(--font-primary); transition: 0.3s; border: 1px solid var(--color-primary); }

    .pricing .buy-btn:hover { background: var(--color-primary); color: #fff; }

.pricing .featured { border-top-color: var(--color-primary); }

    .pricing .featured .buy-btn { background: var(--color-primary); color: #fff; }

@media (max-width: 992px) {
    .pricing .box { max-width: 60%; margin: 0 auto 30px auto; }
}

@media (max-width: 767px) {
    .pricing .box { max-width: 80%; margin: 0 auto 30px auto; }
}

@media (max-width: 420px) {
    .pricing .box { max-width: 100%; margin: 0 auto 30px auto; }
}

/*--------------------------------------------------------------
# Frequently Asked Questions Section
--------------------------------------------------------------*/
.faq { padding-top: 80px; }

    .faq .accordion-item { border: 0; margin-bottom: 10px; }

    .faq .accordion-collapse { border: 0; }

    .faq .accordion-button { padding: 15px 30px 20px 60px; font-weight: 600; border: 0; font-size: 18px; color: var(--color-default); text-align: left; background: rgba(14, 29, 52, 0.03); border-radius: 5px; }

        .faq .accordion-button:focus { box-shadow: none; }

        .faq .accordion-button:not(.collapsed) { color: var(--color-primary); border-bottom: 0; box-shadow: none; }

    .faq .question-icon { position: absolute; top: 14px; left: 25px; font-size: 20px; color: var(--color-primary); }

    .faq .accordion-button:after { position: absolute; right: 15px; top: 15px; }

    .faq .accordion-body { padding: 0 30px 25px 60px; border: 0; background: rgba(14, 29, 52, 0.03); border-radius: 5px; }

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials { padding: 80px 0; background: url("../img/testimonials-bg.jpg") no-repeat; background-position: center center; background-size: cover; position: relative; }

    .testimonials .testimonial-item p { color: #fff; }

    .testimonials::before { content: ""; position: absolute; inset: 0; background: rgba(14, 29, 52, 0.7); }

    .testimonials .section-header { margin-bottom: 40px; }

    .testimonials .testimonials-carousel,
    .testimonials .testimonials-slider { overflow: hidden; }

    .testimonials .testimonial-item { text-align: center; color: #fff; }

        .testimonials .testimonial-item .testimonial-img { width: 100px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, 0.15); margin: 0 auto; }

        .testimonials .testimonial-item h3 { font-size: 20px; font-weight: bold; margin: 10px 0 5px 0; color: #fff; }

        .testimonials .testimonial-item h4 { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin: 0 0 15px 0; }

        .testimonials .testimonial-item .stars { margin-bottom: 15px; }

            .testimonials .testimonial-item .stars i { color: #ffc107; margin: 0 1px; }

        .testimonials .testimonial-item .quote-icon-left,
        .testimonials .testimonial-item .quote-icon-right { color: rgba(255, 255, 255, 0.6); font-size: 26px; line-height: 0; }

        .testimonials .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative; }

        .testimonials .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px; transform: scale(-1, -1); }

        .testimonials .testimonial-item p { font-style: italic; margin: 0 auto 15px auto; }

    .testimonials .swiper-pagination { margin-top: 20px; position: relative; }

        .testimonials .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.4); opacity: 0.5; }

        .testimonials .swiper-pagination .swiper-pagination-bullet-active { background-color: #fff; opacity: 1; }

@media (min-width: 992px) {
    .testimonials .testimonial-item p { width: 80%; }
}

/*--------------------------------------------------------------
# Stats Counter Section
--------------------------------------------------------------*/
.stats-counter .stats-item { padding: 30px; width: 100%; }

    .stats-counter .stats-item span { font-size: 48px; display: block; color: var(--color-secondary); font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; position: relative; }

        .stats-counter .stats-item span:after { content: ""; position: absolute; display: block; width: 25px; height: 3px; background: var(--color-primary); left: 0; right: 0; bottom: 0; margin: auto; }

    .stats-counter .stats-item p { padding: 0; margin: 0; font-family: var(--font-primary); font-size: 15px; font-weight: 500; color: var(--color-secondary); }

/*--------------------------------------------------------------
# Our Team Section
--------------------------------------------------------------*/
.team .member { text-align: center; margin-bottom: 20px; background: #fff; border: 1px solid rgba(14, 29, 52, 0.15); }

    .team .member img { margin: -1px -1px 30px -1px; }

    .team .member .member-content { padding: 0 20px 30px 20px; }

    .team .member h4 { font-weight: 700; margin-bottom: 2px; font-size: 18px; }

    .team .member span { font-style: italic; display: block; font-size: 13px; color: #6c757d; }

    .team .member p { padding-top: 10px; font-size: 14px; font-style: italic; color: #6c757d; }

    .team .member .social { margin-top: 15px; }

        .team .member .social a { color: rgba(14, 29, 52, 0.5); transition: 0.3s; }

            .team .member .social a:hover { color: var(--color-primary); }

        .team .member .social i { font-size: 18px; margin: 0 2px; }

/*--------------------------------------------------------------
# Horizontal Pricing Section
--------------------------------------------------------------*/
.horizontal-pricing .pricing-item { box-shadow: 0 3px 20px -2px rgba(108, 117, 125, 0.15); padding-bottom: 30px; background: #fff; height: 100%; position: relative; }

.horizontal-pricing h3 { font-weight: 700; margin-bottom: 0; font-size: 24px; color: var(--color-secondary); }

.horizontal-pricing h4 { font-size: 48px; color: var(--color-primary); font-weight: 400; font-family: var(--font-primary); margin-bottom: 25px; text-align: center; }

    .horizontal-pricing h4 sup { font-size: 28px; }

    .horizontal-pricing h4 span { color: rgba(108, 117, 125, 0.8); font-size: 18px; }

.horizontal-pricing ul { padding: 20px 0; list-style: none; color: #6c757d; text-align: left; line-height: 20px; }

    .horizontal-pricing ul li { padding-top: 15px; display: flex; align-items: center; }

    .horizontal-pricing ul i { color: #059652; font-size: 24px; padding-right: 3px; }

    .horizontal-pricing ul .na { color: rgba(108, 117, 125, 0.5); }

        .horizontal-pricing ul .na i { color: rgba(108, 117, 125, 0.5); }

        .horizontal-pricing ul .na span { text-decoration: line-through; }

.horizontal-pricing .buy-btn { display: inline-block; padding: 12px 40px; border-radius: 4px; color: #fff; background-color: var(--color-primary); border: 2px solid var(--color-primary); transition: none; font-size: 16px; font-weight: 500; transition: 0.3s; font-family: var(--font-primary); }

    .horizontal-pricing .buy-btn:hover { background: #406aff; border-color: #406aff; }

.horizontal-pricing .featured { background: var(--color-primary); }

    .horizontal-pricing .featured h3,
    .horizontal-pricing .featured h4,
    .horizontal-pricing .featured h4 span,
    .horizontal-pricing .featured ul,
    .horizontal-pricing .featured ul .na,
    .horizontal-pricing .featured ul i,
    .horizontal-pricing .featured ul .na i { color: #fff; }

    .horizontal-pricing .featured .buy-btn { background: var(--color-primary); color: #fff; border-color: #fff; }

        .horizontal-pricing .featured .buy-btn:hover { background: #fff; color: var(--color-primary); }

/*--------------------------------------------------------------
# Get a Quote Section
--------------------------------------------------------------*/
.get-a-quote .quote-bg { min-height: 500px; background-size: cover; background-position: center; }

.get-a-quote .php-email-form { background: #f3f6fc; padding: 40px; height: 100%; }

@media (max-width: 575px) {
    .get-a-quote .php-email-form { padding: 20px; }
}

.get-a-quote .php-email-form h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.get-a-quote .php-email-form h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 0 0; }

.get-a-quote .php-email-form p { font-size: 14px; margin-bottom: 20px; }

.get-a-quote .php-email-form .error-message { display: none; color: #fff; background: #df1529; text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600; }

.get-a-quote .php-email-form .sent-message { display: none; color: #fff; background: #059652; text-align: center; padding: 15px; margin-bottom: 24px; font-weight: 600; }

.get-a-quote .php-email-form .loading { display: none; background: #fff; text-align: center; padding: 15px; margin-bottom: 24px; }

    .get-a-quote .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #059652; border-top-color: #fff; animation: animate-loading 1s linear infinite; }

.get-a-quote .php-email-form input,
.get-a-quote .php-email-form textarea { border-radius: 0; box-shadow: none; font-size: 14px; border-radius: 0; }

    .get-a-quote .php-email-form input:focus,
    .get-a-quote .php-email-form textarea:focus { border-color: var(--color-primary); }

.get-a-quote .php-email-form input { padding: 12px 15px; }

.get-a-quote .php-email-form textarea { padding: 12px 15px; }

.get-a-quote .php-email-form button[type=submit] { background: var(--color-primary); border: 0; padding: 10px 30px; color: #fff; transition: 0.4s; border-radius: 4px; }

    .get-a-quote .php-email-form button[type=submit]:hover { background: rgba(13, 66, 255, 0.8); }

@keyframes animate-loading {
    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item + .info-item { margin-top: 40px; }

.contact .info-item i { font-size: 20px; background: var(--color-primary); color: #fff; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 4px; transition: all 0.3s ease-in-out; margin-right: 15px; }

.contact .info-item h4 { padding: 0; font-size: 20px; font-weight: 600; margin-bottom: 5px; color: var(--color-secondary); }

.contact .info-item p { padding: 0; margin-bottom: 0; font-size: 14px; color: rgba(14, 29, 52, 0.8); }

.contact .php-email-form { width: 100%; background: #fff; }

    .contact .php-email-form .form-group { padding-bottom: 8px; }

    .contact .php-email-form .error-message { display: none; color: #fff; background: #df1529; text-align: left; padding: 15px; font-weight: 600; }

        .contact .php-email-form .error-message br + br { margin-top: 25px; }

    .contact .php-email-form .sent-message { display: none; color: #fff; background: #059652; text-align: center; padding: 15px; font-weight: 600; }

    .contact .php-email-form .loading { display: none; background: #fff; text-align: center; padding: 15px; }

        .contact .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #059652; border-top-color: #fff; animation: animate-loading 1s linear infinite; }

    .contact .php-email-form input,
    .contact .php-email-form textarea { border-radius: 4px; box-shadow: none; font-size: 14px; }

    .contact .php-email-form input { height: 44px; }

    .contact .php-email-form textarea { padding: 10px 12px; }

    .contact .php-email-form button[type=submit] { background: #303d6f; border: 0; padding: 10px 35px; color: #fff; transition: 0.4s; border-radius: 5px; }

        .contact .php-email-form button[type=submit]:hover { background: rgba(13, 66, 255, 0.8); }

@keyframes animate-loading {
    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list { padding: 10px 30px; border: 1px solid #d3dff3; margin-bottom: 20px; }

    .service-details .services-list a { display: block; line-height: 1; padding: 8px 0 8px 15px; border-left: 3px solid #c2cbdf; margin: 20px 0; color: var(--color-secondary); transition: 0.3s; }

        .service-details .services-list a.active { font-weight: 700; border-color: var(--color-primary); }

        .service-details .services-list a:hover { border-color: var(--color-primary); }

.service-details .services-img { margin-bottom: 20px; }

.service-details h3 { font-size: 28px; font-weight: 700; color: var(--color-secondary); }

.service-details h4 { font-size: 20px; font-weight: 700; color: var(--color-secondary); }

.service-details p { font-size: 15px; }

.service-details ul { list-style: none; padding: 0; font-size: 15px; }

    .service-details ul li { padding: 5px 0; display: flex; align-items: center; }

    .service-details ul i { font-size: 20px; margin-right: 8px; color: var(--color-primary); }

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero { width: 100%; min-height: 50vh; background-color: var(--color-secondary); background-image: url("../img/hero-bg.png"); background-size: cover; background-position: center; position: relative; padding: 120px 0 60px 0; color: rgba(255, 255, 255, 0.8); }

    .hero h2 { margin-bottom: 20px; padding: 0; font-size: 48px; font-weight: 700; color: #fff; }

@media (max-width: 575px) {
    .hero h2 { font-size: 30px; }
}

.hero p { font-size: 15px; font-weight: 400; margin-bottom: 40px; }

.hero form { background: #fff; padding: 10px; border-radius: 10px; }

    .hero form .form-control { padding-top: 18px; padding-bottom: 18px; padding-left: 20px; padding-right: 20px; border: none; margin-right: 10px; border: none !important; background: none !important; }

        .hero form .form-control:hover,
        .hero form .form-control:focus { outline: none; box-shadow: none; }

    .hero form .btn-primary { background-color: var(--color-primary); padding: 15px 30px; }

        .hero form .btn-primary:hover { background-color: #2756ff; }

.hero .stats-item { padding: 30px; width: 100%; }

    .hero .stats-item span { font-size: 32px; display: block; font-weight: 700; margin-bottom: 15px; padding-bottom: 15px; position: relative; }

        .hero .stats-item span:after { content: ""; position: absolute; display: block; width: 20px; height: 3px; background: var(--color-primary); left: 0; right: 0; bottom: 0; margin: auto; }

    .hero .stats-item p { padding: 0; margin: 0; font-family: var(--font-primary); font-size: 15px; font-weight: 600; }

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters { padding: 0; margin: 0 auto 25px auto; list-style: none; text-align: center; background: white; border-radius: 50px; padding: 2px 15px; }

    .portfolio #portfolio-flters li { cursor: pointer; display: inline-block; padding: 8px 20px 10px 20px; font-size: 15px; font-weight: 600; line-height: 1; color: #444444; margin: 0 4px 8px 4px; transition: 0.3s; border-radius: 50px; border: 1px solid #fff; }

        .portfolio #portfolio-flters li:hover,
        .portfolio #portfolio-flters li.filter-active { color: #4154f1; border-color: #4154f1; }

        .portfolio #portfolio-flters li:last-child { margin-right: 0; }

.portfolio .portfolio-wrap { transition: 0.3s; position: relative; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.75); }

    .portfolio .portfolio-wrap::before { content: ""; background: rgba(0, 0, 0, 0.75); position: absolute; left: 30px; right: 30px; top: 30px; bottom: 30px; transition: all ease-in-out 0.3s; z-index: 2; opacity: 0; }

    .portfolio .portfolio-wrap img { transition: 1s; }

    .portfolio .portfolio-wrap .portfolio-info { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; z-index: 3; transition: all ease-in-out 0.3s; display: flex; flex-direction: column; justify-content: center; align-items: center; }

        .portfolio .portfolio-wrap .portfolio-info::before { display: block; content: ""; width: 48px; height: 48px; position: absolute; top: 35px; left: 35px; border-top: 3px solid rgba(1, 41, 112, 0.2); border-left: 3px solid rgba(1, 41, 112, 0.2); transition: all 0.5s ease 0s; z-index: 9994; }

        .portfolio .portfolio-wrap .portfolio-info::after { display: block; content: ""; width: 48px; height: 48px; position: absolute; bottom: 35px; right: 35px; border-bottom: 3px solid rgba(1, 41, 112, 0.2); border-right: 3px solid rgba(1, 41, 112, 0.2); transition: all 0.5s ease 0s; z-index: 9994; }

        .portfolio .portfolio-wrap .portfolio-info h4 { font-size: 20px; color: #012970; font-weight: 700; }

        .portfolio .portfolio-wrap .portfolio-info p { color: #012970; font-weight: 600; font-size: 14px; text-transform: uppercase; padding: 0; margin: 0; }

    .portfolio .portfolio-wrap .portfolio-links { text-align: center; z-index: 4; }

        .portfolio .portfolio-wrap .portfolio-links a { color: #fff; background: #4154f1; margin: 10px 2px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.3s; }

            .portfolio .portfolio-wrap .portfolio-links a i { font-size: 20px; line-height: 0; }

            .portfolio .portfolio-wrap .portfolio-links a:hover { background: #5969f3; }

    .portfolio .portfolio-wrap:hover img { transform: scale(1.1); }

    .portfolio .portfolio-wrap:hover::before { top: 0; left: 0; right: 0; bottom: 0; opacity: 1; }

    .portfolio .portfolio-wrap:hover .portfolio-info { opacity: 1; }

        .portfolio .portfolio-wrap:hover .portfolio-info::before { top: 15px; left: 15px; }

        .portfolio .portfolio-wrap:hover .portfolio-info::after { bottom: 15px; right: 15px; }

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details { padding-top: 40px; }

    .portfolio-details .portfolio-details-slider img { width: 100%; }

    .portfolio-details .portfolio-details-slider .swiper-pagination { margin-top: 20px; position: relative; }

        .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #fff; opacity: 1; border: 1px solid #4154f1; }

        .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: #4154f1; }

    .portfolio-details .portfolio-info { padding: 30px; box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); }

        .portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }

        .portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px; }

            .portfolio-details .portfolio-info ul li + li { margin-top: 10px; }

    .portfolio-details .portfolio-description { padding-top: 30px; }

        .portfolio-details .portfolio-description h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px; }

        .portfolio-details .portfolio-description p { padding: 0; }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer { font-size: 14px; background-color: #f5f5f5; padding: 50px 0 20px 0; color: #666; margin-top: 50px; }

    .footer .footer-info .logo { line-height: 0; margin-bottom: 25px; }

        .footer .footer-info .logo img { max-height: 40px; margin-right: 6px; }

        .footer .footer-info .logo span { font-size: 30px; font-weight: 700; letter-spacing: 1px; color: #fff; font-family: var(--font-primary); }

    .footer .footer-info p { font-size: 14px; font-family: var(--font-primary); }

    .footer .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 16px; color: rgba(255, 255, 255, 0.7); margin-right: 10px; transition: 0.3s; }

    .footer .footersocial-links a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #000; font-size: 16px; color: #000; margin-right: 8px; transition: 0.3s; }

        .footer .footersocial-links a:hover { background: #fff; color: #0e1d34; }

    .footer .social-links a:hover { color: #fff; border-color: #fff; }

    .footer h4 { font-size: 25px; font-weight: bold; position: relative; padding-bottom: 12px; }

    .footer .footer-links { margin-bottom: 30px; }

        .footer .footer-links ul { list-style: none; padding: 0; margin: 0; }

            .footer .footer-links ul i { padding-right: 2px; color: rgba(13, 66, 255, 0.8); font-size: 12px; line-height: 0; }

            .footer .footer-links ul li { padding: 10px 0; display: flex; align-items: center; }

                .footer .footer-links ul li:first-child { padding-top: 0; }

            .footer .footer-links ul a { color: #000; transition: 0.3s; display: inline-block; line-height: 1; font-size: 15px; }

                .footer .footer-links ul a:hover { color: #343b63; }

    .footer .footer-contact p { line-height: 33px; color: #000; font-size: 15px; font-weight: 300; }

    .footer .copyright { text-align: center; }

    .footer .credits { padding-top: 4px; text-align: center; font-size: 13px; }

        .footer .credits a { color: #fff; }

.topbar { background: #f5f5f5; height: 35px; font-size: 14px; transition: all 0.5s; color: #fff; padding: 0; }

    .topbar .contact-info i { font-style: normal; color: #fff; line-height: 0; }

        .topbar .contact-info i a,
        .topbar .contact-info i span { padding-left: 5px; color: #fff; }

@media (max-width: 575px) {

    .topbar .contact-info i a,
    .topbar .contact-info i span { font-size: 13px; }
}

.topbar .contact-info i a { line-height: 0; transition: 0.3s; }

    .topbar .contact-info i a:hover { color: #fff; text-decoration: underline; }

.topbar .social-links a { color: rgba(255, 255, 255, 0.7); line-height: 0; transition: 0.3s; margin-left: 20px; }

    .topbar .social-links a:hover { color: #fff; }

.banner_text { top: -90px; position: relative; text-shadow: 3px 0px #8d8e91; font-size: 40px; font-family: "poppins", sans-serif; }

@media (max-width: 767px) {
    .banner_text { top: 0; position: relative; font-size: 20px; line-height: 30px !important; }

        .banner_text:before { content: ''; background-color: rgb(0,0,0,0.5); width: 320px !important; height: 110px !important; display: inline-block; position: absolute; left: -16px !important; z-index: -1; top: -27px !important; border-radius: 5px; }

    div#contact .section-header { padding: 20px 0; }

        div#contact .section-header h2 { margin: 0; padding-bottom: 60px; }

        div#contact .section-header p { margin-bottom: 0; position: relative; z-index: 2; top: 82px; }


        div#contact .section-header span { top: 83px; }

    .owl-carousel .owl-stage-outer { height: auto; }

    .header-carousel .owl-nav { top: 70%; right: 7%; }

        .header-carousel .owl-nav .owl-prev, .header-carousel .owl-nav .owl-next { margin: 5px 0; width: 30px; height: 30px; font-size: 18px; }
    .footer-contact { padding: 0 30px; }
    .footer .footer-links { padding: 0 30px; }
    .footer-info { padding: 0 30px; }
}

/*navbar hover effects*/
nav ul li a,
nav ul li a:after,
nav ul li a:before { transition: all .5s; }

nav.navbar ul li a { position: relative; z-index: 1; }

    nav.navbar ul li a:hover { color: #fff; }

    nav.navbar ul li a:after { display: block; position: absolute; top: 0; left: 15px; bottom: 0; right: 0; margin: auto; width: 100%; height: 1px; content: '.'; color: transparent; background: #303d6f; visibility: none; opacity: 0; z-index: -1; border-radius: 6px; }

    nav.navbar ul li a:hover:after { opacity: 1; visibility: visible; height: 100%; }

    nav.navbar ul li a.active:after { opacity: 1; visibility: visible; height: 100%; }

nav.navbar ul.level1 li a:after { left: 0; width: 95%; }
/*navbar hover effects*/
.banner_text:before { content: ''; background-color: rgb(0,0,0,0.5); width: 710px; height: 190px; display: inline-block; position: absolute; left: -126px; z-index: -1; top: -37px; border-radius: 5px; }

.banner_text { line-height: 50px; }

.filter-card, .filter-web, .filter-app { margin-top: 8px; }

@media screen and (min-width:768px) {
    div#portfolio .section-header { text-align: left; padding: 20px 0; }

        div#portfolio .section-header h2 { margin: 0; }

            div#portfolio .section-header h2:after { margin: initial; }

        div#portfolio .section-header span { top: 40px; font-size: 44px; }

    div#contact .section-header { text-align: left; padding: 20px 0; }

        div#contact .section-header h2 { margin: 0; padding-bottom: 40px; }

        div#contact .section-header p { margin-bottom: 0; position: relative; z-index: 2; top: 67px; }

        div#contact .section-header h2:after { margin: initial; }

        div#contact .section-header span { top: 60px; font-size: 44px; }
}

.swiper-container { padding-bottom: 10px; }
.add_cart { background: #343b63; color: #fff; padding: 7px 18px; border-radius: 4px; border: none; outline: none; }
    .add_cart:hover { background: #558e9b; }
button.btn.req_prd { background: #000; padding: 11px 20px; color: #fff; border-radius: 3px; margin-top: 30px; font-size: 16px; }
    button.btn.req_prd:hover { background: #303d6f; }
.qty_select { padding: 7px 10px; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; }
.page-item.active .page-link { z-index: 3; color: #fff; background-color: #30385d !important; border-color: #30385d !important; }
.error { border-color: red; }
#requestModal .btn-primary { background-color: #343b63; border-color: #343b63; }

.tech_slider p, .service-item p { display: none; }