/*
@File: Conzio Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
** - DEFAULT AREA STYLE - **

** - Default Btn Area Style
** - Read More Area Style
** - Section Title Area Style

** - HOME PAGE STYLE - **

** - Top Header Area Style
** - Nav Area Style
** - Mobile Nav Area Style
** - Hero Slider Area Style
** - Who We Are Content Area Style
** - Feathers Area Style
** - Service Area Style
** - Counter Area Style
** - Featured Area Style
** - Price Area Style
** - Skill Area Style
** - Partner Area Style
** - Testimonials Area Style
** - Blog Area Style
** - Subscribe Area Style
** - Footer Top Area Style
** - Footer Bottom Area Style
** - Sidebar Area Style

** - OTHER STYLE AREA - **

** - Preloader Area Style
** - Go Top Style
** - Video wave Style
** - Section Title Area Style
** - Nice select Area

*******************************************
/*

/*
Default Style
============================*/

:root {
    --body-family: "Poppins", sans-serif;
    --button-and-icon-bg-color: #347BB3;
    --main-color: #134270;
    --orange-color: #134270;
    --body-color: #555555;
    --heading-color: #0086b7;
    --white-color: #ffffff;
    --black-color: #000000;
    --font-size: 16px;
    --transition: all ease .5s;
    --border-radius: 5px;
    --box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--body-family);
    overflow-x: hidden;
    background: #F9F9F9D9;
}

.row {
    margin: 0;
}

a {
    display: inline-block;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    text-decoration: none;
    color: var(--body-color);
}

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

a:focus {
    text-decoration: none;
}

button {
    outline: 0 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

button:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--main-color);
    font-weight: 700;
}

h3 {
    font-size: 24px;
}

.d-table {
    width: 100%;
    height: 100%;
}

.d-table-cell {
    vertical-align: middle;
}

p {
    font-size: var(--font-size);
    margin-bottom: 15px;
    line-height: 1.8;
}

p:last-child {
    margin-bottom: 0;
}

img {
    max-width: 100%;
    height: auto;
}

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

.form-control {
    height: 50px;
    color: var(--main-color);
    border: 1px solid #ebebeb;
    background-color: #f7f7f7;
    border-radius: 0;
    font-size: 16px;
    padding: 10px 20px;
    width: 100%;
}

.form-control::-webkit-input-placeholder {
    color: var(--main-color);
}

.form-control:-ms-input-placeholder {
    color: var(--main-color);
}

.form-control::-ms-input-placeholder {
    color: var(--main-color);
}

.form-control::placeholder {
    color: var(--main-color);
}

.form-control:focus {
    color: var(--black-color);
    background-color: transparent;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    outline: 0;
    border: 1px solid var(--main-color);
}

.form-control:hover:focus,
.form-control:focus {
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

textarea.form-control {
    height: auto;
}

.ptb-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.ptb-70 {
    padding-top: 70px;
    padding-bottom: 70px;
}

.pt-100 {
    padding-top: 100px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pt-70 {
    padding-top: 70px;
}

.pb-70 {
    padding-bottom: 70px;
}

.mt-100 {
    margin-top: 100px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

/*====================================================
Progress bar and Scroll Bar
======================================================*/
.bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: transparent;
    z-index: 9999;
    transition: var(--transition);
}

.bar--progress {
    position: absolute;
    width: 0%;
    height: 5px;
    background: var(--orange-color);
    transition: 0.25s ease-in-out;
}

/*
Bg-color Style*/
.ebeef5-bg-color {
    background-color: #ebeef5;
}

.f5f6fa-bg-color {
    background-color: #f5f6fa;
}

/*
Default Btn Area Style*/
.default-btn {
    font-size: 16px;
    color: var(--white-color);
    padding: 15px 40px;
    line-height: 1;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    text-align: center;
    background-color: var(--main-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--main-color);
    text-transform: capitalize;
}

.default-btn:hover {
    color: var(--main-color);
    border-color: var(--main-color) !important;
    background-color: transparent;
}

/*====================================================
OTHERS STYLE AREA
======================================================*/
/*
Preloader Area Style*/
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    overflow: hidden;
    z-index: 9999;
    background-color: var(--white-color);
}

.loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    -webkit-animation: spin 1.7s linear infinite;
    animation: spin 1.7s linear infinite;
    z-index: 11;
}

.loaded .loader-wrapper {
    visibility: hidden;
    /*-webkit-transform: translateY(-100%);*/
    /*transform: translateY(-100%);*/
    -webkit-transition: all 0.3s 1s ease-out;
    transition: all 0.3s 1s ease-out;
}

.loaded .loader-wrapper .loader-section.section-left {
    /*-webkit-transform: translateX(-100%);*/
    /*transform: translateX(-100%);*/
    -webkit-transition: all 0.3s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded .loader-wrapper .loader-section.section-right {
    /*-webkit-transform: translateX(100%);*/
    /*transform: translateX(100%);*/
    -webkit-transition: all 0.3s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded .loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.dot-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


/*
Go Top Style*/
.go-top {
    position: fixed;
    cursor: pointer;
    top: 88%;
    right: -10%;
    background-color: var(--main-color);
    z-index: 4;
    width: 40px;
    text-align: center;
    height: 42px;
    line-height: 42px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .9s;
    transition: .9s;
}

.go-top i {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    color: var(--white-color);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-size: 20px;
}

.go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%;
}

.go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--orange-color);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.go-top:hover {
    color: var(--white-color);
    background-color: var(--orange-color);
}

.go-top:hover::before {
    opacity: 1;
    visibility: visible;
}

.go-top:hover i:first-child {
    opacity: 0;
    top: 0;
    visibility: hidden;
}

.go-top:hover i:last-child {
    opacity: 1;
    visibility: visible;
    top: 50%;
}

.go-top:focus {
    color: var(--white-color);
}

.go-top:focus::before {
    opacity: 1;
    visibility: visible;
}

.go-top:focus i:first-child {
    opacity: 0;
    top: 0;
    visibility: hidden;
}

.go-top:focus i:last-child {
    opacity: 1;
    visibility: visible;
    top: 50%;
}

.go-top.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    right: 3%;
    top: 86%;
}

/* Read more */
.read-more {
    background: linear-gradient(90deg, #347BB3 50%, #e7eff6 0) var(--_p, 100%)/200% no-repeat;
    text-align: center;
    border-radius: 14px;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    color: var(--button-and-icon-bg-color);
    margin-right: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;

}

.read-more:hover {
    --_p: 0%;
    color: var(--main-color);
}

@media only screen and (max-width: 1400px) {
    .read-more {
        margin-right: 15px;
    }
}

@media only screen and (max-width: 1200px) {

}


/* End read more */

/* Owl Nav and Owl dots */
.owl-nav,
.owl-dots {
    display: none;
}

/* Scrollbar */

/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 5px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--main-color);
}

/* Same Components */


.section-title {
    font-weight: 700;
    font-size: 38px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.section-inline {
    width: 182px;
    display: none;
    height: 3px;
    background: rgb(52, 123, 179);
    background: linear-gradient(90deg, rgba(52, 123, 179, 1) 50%, rgba(252, 110, 39, 1) 50%);
    margin-bottom: 36px;
}

@media only screen and (max-width: 1400px) {
    .section-title {
        font-size: 32px;
    }
}

@media only screen and (max-width: 1200px) {
    .section-title {
        text-align: center;
    }

    .section-inline {
        margin: 0 auto;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .section-title {
        font-size: 20px;
    }
}

/* Main */

main {
    margin-top: 50px;
}

.main-title-container {
    text-align: center;
}

.main-text {
    margin-bottom: 10px;
    color: var(--orange-color);
    font-size: 24px;
    font-weight: 400;

}


.main-title {
    font-size: 50px;
    font-weight: 700;

}

.main-title span {
    color: var(--orange-color);
}

.main-title-container .section-inline {
    margin: 0 auto;
    margin-top: 30px;
}

.main-title-info a,
.main-title-info span {
    font-family: Inter;
    font-size: 18px;
    font-weight: 400;
    color: var(--button-and-icon-bg-color);
}

.main-title-info span:last-child {
    color: var(--orange-color);
}

.main-body-container {
    margin-top: 80px;
}


@media only screen and (max-width: 1200px) {
    main {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 576px) {
    .main-text {
        font-size: 18px;
    }

    .main-title {
        font-size: 25px;
        margin-top: 10px;
    }
}

.nav-carousel {
    position: relative;
}

.nav-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: -4%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 108%;
    pointer-events: none;
    z-index: 10;
}

.nav-carousel .owl-nav button {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 24px;
    height: 24px;
    width: 20px;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}