/*
@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
============================*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+Georgian:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url(./partials/header.css);
@import url(./partials/menu.css);
@import url(./partials/footer.css);
@import url(./pages/home.css);
@import url(./tools/card.css);
@import url(./tools/modal.css);


:root {
    --poppins-family: "Poppins", sans-serif;
    --dm-family: "DM Sans", sans-serif;
    --montserrat-family: "Montserrat", sans-serif;
    --body-family: "Montserrat", sans-serif;
    --georgia-family: "Noto Sans Georgian", sans-serif;
    --cormorant-family: "Cormorant Garamond", serif;
    --main-color: #222326;
    --body-color: #FBFBFB;
    --heading-color: #0086b7;
    --white-color: #ffffff;
    --black-color: #000000;
    --nav-color: #0086b7;
    --font-size: 16px;
    --transition: all ease .5s;
    --border-radius: 4px;
    --box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: var(--body-family);
    /* color: var(--body-color); */
    background-color: var(--body-color);
    padding: 0 !important;
}

.row {
    margin: 0;
}

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

a:hover {
    text-decoration: none;
}

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 {
    font-family: var(--heading-family);
    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: 0;
    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;
}

.form-select:focus {
    outline: none;
    box-shadow: none;
    border-color: #ECEDEE;
}

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;
}

/*
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;
}

/*
Read More Btn Area Style*/
.read-more {
    width: 170px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #484848;
    border: 1px solid #484848;
    font-family: var(--montserrat-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 14.63px;
    margin: 0 auto;
    border-radius: 27px;

}


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

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

@keyframes example {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.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.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.7s 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.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.7s 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%;
    transform: translate(-50%, -50%);
    -webkit-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(--main-color);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.go-top:hover {
    color: var(--white-color);
    background-color: var(--main-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%;
}


/* Search  */
.my-search {
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-search {
    height: 30px;
    display: flex;
    cursor: pointer;
    padding: 10px 20px;
    background: #fff;
    align-items: center;
    transition: 0.8s all ease-in-out;
}

.my-search:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-radius: 30px;
}

.my-search:hover input {
    width: 100%;
}

.my-search input {
    width: 0;
    outline: none;
    border: none;
    font-weight: 500;
    transition: 0.5s all ease-in-out;
    background: transparent;
    color: gray;
}

.my-search button {
    background: transparent;
}

.my-search button .fas {
    color: #1daf;
    font-size: 18px;
}


@media only screen and (max-width: 991px) {
    .my-search {
        height: 24px;
        padding: 5px 10px;
    }
}


@media only screen and (max-width: 767px) {
    .my-search {
        height: 20px;
        padding: 5px 10px;
    }

    .my-search:hover input {
        width: 150px;
    }

    .my-search input {
        font-size: 13px;
    }
}

@media only screen and (max-width: 420px) {
    .my-search:hover input {
        width: 80px;
    }
}

/* 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);
}

.page-header a, .page-header span {
    font-family: var(--montserrat-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    margin: 25px 0;
}


.menu ul li .menu-item {
    color: #161616;
}

.search-form input {
    color: #000;
}

.search-form:before {
    color: #000;
}

.close {
    color: #000;
}

.product-container {
    padding: 40px 0;
}

.count-span {
    position: absolute;
    top: -5px;
    left: 60%;
    padding: 1px 5px 0 5px;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    min-width: 14px;
}