@charset "UTF-8";

@import "https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap";

@import "https://fonts.googleapis.com/css2?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";

:root {

    --fontFamily: 'Saira Condensed', sans-serif;

    --fontFamily2: 'Poppins', sans-serif;

    --mainColor: #0d00ff;

    --mainColorShadow: #0d00ff40;

    --whiteColor: #ffffff;

    --blackColor: #111111;

    --paragraphColor: #666666;

    --card-title-fontSize: 24px;

    --fontSize: 16px;

    --transition: 0.5s;

    --boxShadow: rgba(114, 114, 114, 0.1) 0px 0px 8px

}



body {

    margin: 0;

    padding: 0;

    -webkit-box-sizing: border-box;

    box-sizing: border-box

}



.h1,

.h2,

.h3,

.h4,

.h5,

.h6,

h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: var(--fontFamily)

}



a {

    -webkit-transition: var(--transition);

    transition: var(--transition);

    color: var(--blackColor);

    text-decoration: none;

    outline: 0 !important

}



a:hover {

    color: var(--mainColor);

    text-decoration: none

}



:focus {

    outline: 0 !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important

}



.form-control {

    border: 1px solid transparent !important;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out

}



.form-control:focus {

    border: 1px solid var(--mainColor) !important

}



img {

    max-width: 100%;

    height: auto

}



p {

    font-family: var(--fontFamily2);

    color: var(--paragraphColor);

    font-size: var(--fontSize);

    margin-bottom: 15px;

    line-height: 1.8

}



p:last-child {

    margin-bottom: 0

}



.ptb-100 {

    padding-top: 100px;

    padding-bottom: 100px

}



.pt-100 {

    padding-top: 100px

}



.pb-100 {

    padding-bottom: 100px

}



.ptb-70 {

    padding-top: 70px;

    padding-bottom: 70px

}



.pt-70 {

    padding-top: 70px

}



.pb-70 {

    padding-bottom: 70px

}



.pt-50 {

    padding-top: 50px

}



.mst-30 {

    margin-top: 0

}



.pl-20 {

    padding-left: 20px

}



.pr-20 {

    padding-right: 20px

}



.mt-30 {

    margin-top: 30px

}



.mb-30 {

    margin-bottom: 30px

}



.mb-10 {

    margin-bottom: 10px

}



.section-content {

    margin-top: 20px

}



.d-table {

    width: 100%;

    height: 100%

}



.d-table-cell {

    vertical-align: middle

}



.sticky {

    position: fixed !important;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 999;

    padding: 0;

    background-color: var(--whiteColor) !important;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    -webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .09);

    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .09);

    -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;

    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown

}



.bg-f9f9f9 {

    background-color: #f9f9f9

}



.bg-f0f4f9 {

    background-color: #f0f4f9

}



.slider-card-margin {

    margin-left: 5px;

    margin-right: 5px;

    margin-bottom: 30px

}



#pre-loader {

    background-color: var(--whiteColor);

    position: fixed;

    display: block;

    width: 100%;

    height: 100%;

    z-index: 999999

}



#pre-loader .preloader-img {

    position: absolute;

    margin: auto;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content

}



.topbar {

    background-color: #30de33;

    padding: 10px 12px

}



.topbar-left-area ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.topbar-left-area ul li {

    display: inline-block;

    color: var(--whiteColor);

    font-size: 14px;

    font-family: var(--fontFamily2)

}



.topbar-left-area ul li i {

    margin-right: 3px;

    position: relative;

    top: 2px

}



.topbar-left-area ul li a {

    color: var(--whiteColor);

    margin-right: 25px

}



.topbar-left-area ul li:last-child a {

    margin: 0

}



.topbar-social-icons {

    text-align: end

}



.topbar-social-icons ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.topbar-social-icons ul li {

    display: inline-block

}



.topbar-social-icons ul li a {

    font-size: 15px;

    color: var(--whiteColor);

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    margin: 0 5px

}



.nice-select {

    border: 0;

    background-color: transparent;

    height: auto;

    width: 100%;

    line-height: unset;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2);

    padding-top: 0;

    padding-bottom: 0;

    padding-left: 23px;

    padding-right: 15px

}



.nice-select .selected {

    color: var(--mainColor)

}



.nice-select .list {

    width: 100%;

    z-index: 9999

}



.option-select-area {

    position: relative;

    display: inline-block;

    max-width: 100%;

    color: var(--paragraphColor)

}



.option-select-area .fa-globe {

    position: absolute;

    top: 3px;

    left: 0;

    z-index: 99;

    color: var(--whiteColor)

}



.option-select-area .nice-select .list {

    width: 85px;

    z-index: 999;

    display: inline-block

}



.option-select-area .nice-select::after {

    right: 2px;

    width: 7px;

    height: 7px;

    border-color: var(--whiteColor)

}



.option-select-area .nice-select .option {

    text-align: center;

    padding-left: 0;

    padding-right: 0

}



.option-select-area .nice-select .current {

    color: #e6e6e6;

    font-size: 14px

}



a.meanmenu-reveal {

    display: none

}



.mean-container .mean-bar {

    float: left;

    width: 100%;

    position: absolute;

    background: 0 0;

    padding: 20px 0 0;

    z-index: 2;

    height: 60px;

    text-transform: capitalize;

    -webkit-box-sizing: content-box;

    box-sizing: content-box

}



.mean-container .mean-bar * {

    -webkit-box-sizing: content-box;

    box-sizing: content-box

}



.mean-container a.meanmenu-reveal {

    width: 35px;

    height: 30px;

    padding: 12px 15px 0 0;

    position: absolute;

    right: 0;

    top: 50%;

    cursor: pointer;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    color: var(--mainColor);

    text-decoration: none;

    font-size: 16px;

    text-indent: -9999em;

    line-height: 22px;

    font-size: 1px;

    display: block;

    font-weight: 700

}



.mean-container a.meanmenu-reveal span {

    display: block;

    background: var(--mainColor);

    height: 4px;

    margin-top: 5px;

    border-radius: 3px

}



.mean-container .mean-nav {

    float: left;

    width: 100%;

    background: var(--whiteColor);

    margin-top: 64px

}



.mean-container .mean-nav ul {

    padding: 0;

    margin: 0;

    width: 100%;

    border: none;

    list-style-type: none

}



.mean-container .mean-nav ul li {

    position: relative;

    float: left;

    width: 100%

}



.mean-container .mean-nav ul li a {

    display: block;

    float: left;

    width: 90%;

    padding: 1em 5%;

    margin: 0;

    text-align: left;

    color: var(--blackColor);

    border-top: 1px solid #dbeefd;

    text-decoration: none;

    text-transform: capitalize

}



.mean-container .mean-nav ul li a:hover {

    background: var(--whiteColor)

}



.mean-container .mean-nav ul li a.active {

    color: var(--whiteColor)

}



.mean-container .mean-nav ul li li a {

    width: 80%;

    padding: 1em 10%;

    color: var(--blackColor);

    border-top: 1px solid #dbeefd;

    opacity: 1;

    filter: alpha(opacity=75);

    text-shadow: none !important;

    visibility: visible;

    text-transform: none;

    font-size: 15px;

    text-transform: capitalize

}



.mean-container .mean-nav ul li li li a {

    width: 70%;

    padding: 1em 15%

}



.mean-container .mean-nav ul li li li li a {

    width: 60%;

    padding: 1em 20%

}



.mean-container .mean-nav ul li li li li li a {

    width: 50%;

    padding: 1em 25%

}



.mean-container .mean-nav ul li a.mean-expand {

    margin-top: 3px;

    width: 100%;

    height: 24px;

    padding: 12px !important;

    text-align: right;

    position: absolute;

    right: 0;

    top: 0;

    z-index: 2;

    font-weight: 700;

    background: 0 0 !important;

    border: none !important

}



.mean-container .mean-nav ul li.mean-last a {

    border-bottom: none;

    margin-bottom: 0

}



.mean-container .mean-nav .navbar-nav {

    overflow-y: scroll;

    height: 100%

}



.mean-container .mean-push {

    float: left;

    width: 100%;

    padding: 0;

    margin: 0;

    clear: both

}



.mean-nav .wrapper {

    width: 100%;

    padding: 0;

    margin: 0

}



.mean-nav .dropdown-toggle::after {

    display: none

}



.mean-remove {

    display: none !important

}



.mobile-nav {

    display: none;

    position: relative

}



.btn-check:focus+.btn-primary,

.btn-primary:focus {

    background-color: var(--whiteColor);

    color: var(--blackColor)

}



.btn-primary,

.btn-primary:active {

    background-color: var(--whiteColor) !important;

    color: var(--blackColor) !important;

    border-color: var(--blackColor) !important

}



.mobile-nav.mean-container .mean-nav ul li a.active {

    color: var(--mainColor)

}



.main-nav {

    background-color: transparent

}



.main-nav nav {

    padding-top: 20px;

    padding-bottom: 20px

}



.main-nav nav ul {

    padding: 0;

    margin: 0;

    list-style-type: none

}



.main-nav nav .navbar-nav {

    margin-left: auto;

    margin-right: auto

}



.main-nav nav .navbar-nav .nav-item {

    position: relative;

    padding: 15px 0

}



.main-nav nav .navbar-nav .nav-item a {

    padding: 0;

    -webkit-transition: .5s;

    transition: .5s;

    position: relative;

    color: #1d284b;

    font-size: 16px;

    font-weight: 500;

    font-family: var(--fontFamily2);

    margin-left: 14px;

    margin-right: 14px

}



.main-nav nav .navbar-nav .nav-item a i {

    right: 0;

    top: 7px;

    font-size: 12px;

    position: absolute

}



.main-nav nav .navbar-nav .nav-item a.dropdown-toggle {

    padding-right: 15px;

    position: relative

}



.main-nav nav .navbar-nav .nav-item a.dropdown-toggle::after {

    content: '\f0dd';

    font-weight: 600;

    font-family: "font awesome 5 free";

    position: absolute;

    top: -3px;

    right: 0;

    border: 0;

    font-size: 15px

}



.main-nav nav .navbar-nav .nav-item a:hover {

    color: var(--mainColor);

    -webkit-transition: .5s;

    transition: .5s

}



.main-nav nav .navbar-nav .nav-item a.active {

    color: var(--mainColor);

    -webkit-transition: .5s;

    transition: .5s

}



.main-nav nav .navbar-nav .nav-item:hover a {

    color: var(--mainColor)

}



.main-nav nav .navbar-nav .nav-item:hover ul {

    opacity: 1;

    -webkit-transform: rotateY(0deg);

    transform: rotateY(0deg);

    -webkit-transform-origin: left;

    transform-origin: left;

    visibility: visible

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu {

    left: 0;

    top: 70px;

    opacity: 0;

    z-index: 99;

    width: 200px;

    border: none;

    display: block;

    border-radius: 0;

    visibility: hidden;

    position: absolute;

    -webkit-transform: rotateX(-45deg);

    transform: rotateX(-45deg);

    -webkit-transform-origin: bottom;

    transform-origin: bottom;

    background: var(--whiteColor);

    -webkit-transition: all .5s ease-in-out;

    transition: all .5s ease-in-out;

    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);

    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);

    padding-top: 0;

    padding-left: 0;

    padding-right: 0;

    padding-bottom: 0

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li {

    position: relative;

    padding: 0

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li a {

    margin: 0;

    display: block;

    padding: 15px 20px;

    color: var(--blackColor);

    border-bottom: 1px solid #eee;

    font-size: 15px;

    font-weight: 500

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li a i {

    top: 50%;

    position: absolute;

    right: 10px !important;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%)

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover,

.main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active {

    color: var(--mainColor);

    background-color: #f9f9f9

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {

    position: absolute;

    left: 101%;

    top: 0;

    opacity: 0 !important;

    visibility: hidden !important

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {

    top: 20px;

    left: 100%;

    position: absolute;

    opacity: 0 !important;

    visibility: hidden !important

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {

    color: var(--blackColor)

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover,

.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {

    color: var(--mainColor)

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {

    opacity: 1 !important;

    visibility: visible !important;

    top: -5px !important

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu li:hover .dropdown-menu {

    opacity: 1 !important;

    visibility: visible !important;

    top: -5px !important

}



.main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover a {

    color: var(--mainColor)

}



.main-nav nav .navbar-nav .nav-item:last-child .dropdown-menu {

    left: auto;

    right: 0

}



.navbar-light .navbar-brand {

    color: var(--mainColor);

    font-weight: 700;

    text-transform: uppercase

}



.navbar-light .navbar-brand:hover {

    color: var(--mainColor);

    font-weight: 700;

    text-transform: uppercase

}



.mean-container .mean-bar {

    position: relative

}



.mobile-nav .menu-sidebar-small-device {

    display: none;

    margin: 0;

    padding: 0;

    list-style: none;

    position: absolute;

    top: 15px;

    right: 47px

}



.mobile-nav .menu-sidebar-small-device .uni-button {

    padding: 5px 10px

}



.menu-sidebar ul {

    margin: 0;

    padding: 0;

    list-style: none;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



.menu-sidebar ul li {

    margin-left: 15px

}



.menu-sidebar ul li .default-button {

    margin-bottom: -5px;

    padding-top: 13px;

    padding-bottom: 13px

}



.menu-sidebar ul li .cart-icon {

    padding-top: 8px;

    padding-right: 10px;

    font-size: 25px;

    position: relative;

    top: 3px

}



.menu-sidebar ul li .cart-icon span {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--whiteColor);

    background-color: var(--mainColor);

    font-size: 10px;

    font-family: var(--fontFamily2);

    position: absolute;

    right: 0;

    top: 0

}



.menu-small-device {

    display: none;

    position: absolute;

    right: 80px;

    top: 14px;

    margin: 0;

    padding: 0;

    list-style: none

}



.menu-small-device li {

    list-style: none;

    display: inline-block

}



.menu-small-device .cart-icon {

    padding-top: 8px;

    padding-right: 10px;

    font-size: 25px;

    position: relative;

    top: 6px;

    margin-right: 15px

}



.menu-small-device .cart-icon span {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--whiteColor);

    background-color: var(--mainColor);

    font-size: 10px;

    font-family: var(--fontFamily2);

    position: absolute;

    right: 0;

    top: 0

}



.sticky .main-nav {

    background-color: var(--whiteColor)

}



.sticky .main-nav nav {

    padding-left: 0;

    padding-right: 0

}



.popup-button {

    border: 0;

    font-size: 18px;

    border-radius: 0;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    background-color: #eee;

    color: var(--blackColor);

    width: 45px;

    height: 45px;

    display: inline-block;

    line-height: 2.5px

}



.popup {

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    position: fixed;

    z-index: 99999;

    visibility: hidden;

    background-color: #000000ec

}



.popup .popup-content {

    width: 0%;

    height: 100%;

    opacity: 0;

    margin-left: 0;

    margin-right: auto

}



.popup .popup-content .close-btn {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 30px;

    height: 30px;

    cursor: pointer;

    border-radius: 50%

}



.popup .popup-content .close-btn span {

    width: 30px;

    height: 4px;

    border-radius: 25px;

    background-color: red;

    display: inline-block;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



.popup .popup-content .close-btn span:first-child {

    -webkit-transform: translate(-50%, -50%) rotate(45deg);

    transform: translate(-50%, -50%) rotate(45deg)

}



.popup .popup-content .close-btn span:last-child {

    -webkit-transform: translate(-50%, -50%) rotate(-45deg);

    transform: translate(-50%, -50%) rotate(-45deg)

}



.popup .popup-content .close-btn:hover {

    -webkit-transform: rotate(-180deg);

    transform: rotate(-180deg);

    -webkit-transform-origin: center;

    transform-origin: center;

    -webkit-transition: .5s ease;

    transition: .5s ease

}



.popup .popup-content .close-btn:hover span:last-child {

    -webkit-transform: translate(-50%, -50%) rotate(-225deg);

    transform: translate(-50%, -50%) rotate(-225deg);

    -webkit-transition: .4s ease;

    transition: .4s ease

}



.popup .popup-content form {

    top: 20%;

    left: 50%;

    width: 30%;

    visibility: hidden;

    position: absolute;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



.popup .popup-content form .search-box input {

    padding: 5px 20px

}



.popup .popup-content form .search-box .form-control {

    border-radius: 0 !important;

    border: 0 !important;

    color: var(--whiteColor);

    border-bottom: 1px solid #eee !important;

    background-color: transparent;

    font-size: var(--fontSize);

    font-family: var(--fontFamily)

}



.popup .popup-content form .search-box .form-control::-webkit-input-placeholder {

    color: var(--whiteColor)

}



.popup .popup-content form .search-box .form-control:-ms-input-placeholder {

    color: var(--whiteColor)

}



.popup .popup-content form .search-box .form-control::-ms-input-placeholder {

    color: var(--whiteColor)

}



.popup .popup-content form .search-box .form-control::placeholder {

    color: var(--whiteColor)

}



.popup .popup-content form .search-box .btn {

    padding: 5px 15px;

    color: var(--whiteColor);

    border-radius: 0 !important;

    background-color: transparent;

    border-bottom: 1px solid #eee !important;

    font-size: 25px

}



.popup .hi {

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    -webkit-transition-delay: .4s;

    transition-delay: .4s;

    opacity: 1;

    width: 100%;

    background-color: rgba(0, 0, 0, .5)

}



.popup .hi form {

    visibility: visible;

    top: 50% !important;

    -webkit-transition: 1s ease-in-out;

    transition: 1s ease-in-out

}



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

    .topbar-right-side {

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center

    }

    .topbar-left-side {

        text-align: center

    }

    .topbar-left-side ul li {

        margin-right: 7px;

        margin-left: 7px

    }

    .topbar-left-area ul li {

        padding-top: 5px

    }

}



@media only screen and (min-width:768px) and (max-width:991px) {

    .topbar-right-side {

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center

    }

    .topbar-left-side {

        text-align: center

    }

}



@media only screen and (min-width:992px) and (max-width:1199px) {

    .main-nav nav .navbar-nav .nav-item a {

        margin-left: 9px;

        margin-right: 9px

    }

}



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

    .main-nav nav .navbar-nav .nav-item a {

        font-size: 14px;

        margin-left: 13px;

        margin-right: 13px

    }

}



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

    .main-responsive-nav {

        background-color: #fff;

        height: 85px;

        position: relative;

        z-index: 5

    }

    .mobile-nav {

        display: block;

        position: relative

    }

    .mobile-nav .logo {

        top: 10px;

        left: 0;

        z-index: 999;

        position: absolute;

        color: #fff;

        font-weight: 700;

        text-transform: uppercase;

        text-decoration: none

    }

    .mobile-nav nav .navbar-nav {

        max-height: 64vh;

        overflow-y: scroll;

        -webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, .1);

        box-shadow: 0 7px 13px 0 rgba(0, 0, 0, .1)

    }

    .mobile-nav nav .navbar-nav .nav-item a i {

        display: none

    }

    .mobile-nav nav .navbar-nav::-webkit-scrollbar {

        width: 7px

    }

    .mobile-nav nav .navbar-nav::-webkit-scrollbar-track {

        background: #f1f1f1

    }

    .mobile-nav nav .navbar-nav::-webkit-scrollbar-thumb {

        background: #888

    }

    .mobile-nav nav .navbar-nav::-webkit-scrollbar-thumb:hover {

        background: #555

    }

    .mean-container .mean-bar {

        background-color: #fff;

        padding: 0

    }

    .mean-container a.meanmenu-reveal {

        padding: 5px 2px 0 0;

        -webkit-transition: 0s !important;

        transition: 0s !important

    }

    .main-nav {

        display: none !important

    }

    .menu-sidebar {

        display: none

    }

    .menu-small-device {

        z-index: 2;

        right: 50px;

        top: 16px;

        display: -webkit-box !important;

        display: -ms-flexbox !important;

        display: flex !important

    }

    .menu-small-device .default-button {

        padding: 8px;

        font-size: 13px;

        margin-left: 15px

    }

    .menu-small-device .popup-button {

        height: 38px;

        width: 38px

    }

    .meanclose {

        top: 60% !important

    }

    .topbar-left-area {

        text-align: start

    }

    .topbar-left-area ul li {

        margin-left: 5px;

        margin-right: 5px

    }

    .mobile-nav .call-button {

        top: 0

    }

}



.footer {

    background-color: var(--blackColor)

}



.footer-logo-area img {

    margin-bottom: 20px

}



.footer-logo-area p {

    color: #eee;

    font-size: 15px

}



.footer-logo-area .footer-social-area {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-top: 30px

}



.footer-logo-area .footer-social-area span {

    color: var(--whiteColor);

    width: 80px;

    margin-right: 10px;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.footer-logo-area .footer-social-area ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.footer-logo-area .footer-social-area ul li {

    display: inline-block

}



.footer-logo-area .footer-social-area ul li a {

    width: 40px;

    height: 40px;

    font-size: 15px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--whiteColor);

    background-color: rgba(255, 255, 255, .2);

    margin-right: 5px

}



.footer-logo-area .footer-social-area ul li a:hover {

    border-radius: 35%;

    color: var(--whiteColor);

    background-color: var(--mainColor)

}



.footer-links h3 {

    color: var(--whiteColor);

    margin-bottom: 20px;

    display: inline-block;

    font-size: var(--card-title-fontSize);

    font-weight: 600;

    position: relative

}



.footer-links ul {

    margin: 15px 0 0;

    padding: 0;

    list-style: none

}



.footer-links ul li {

    margin-top: 17px;

    font-weight: 400;

    font-size: 15px;

    font-family: var(--fontFamily2)

}



.footer-links ul li a {

    color: #eee;

    position: relative;

    padding-left: 25px

}



.footer-links ul li a::before {

    content: '';

    width: 8px;

    height: 8px;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    background-color: rgba(255, 255, 255, .3);

    position: absolute;

    left: 0;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%)

}



.footer-links ul li a:hover {

    letter-spacing: .5px;

    color: var(--mainColor)

}



.footer-links ul li a:hover::before {

    background-color: var(--mainColor)

}



.footer-lp {

    padding-left: 50px

}



.footer-contact h3 {

    margin-bottom: 10px

}



.footer-contact-card {

    position: relative;

    padding-left: 55px;

    margin-top: 20px

}



.footer-contact-card i {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    border: 1px solid #eeeeee6b;

    color: var(--whiteColor);

    position: absolute;

    left: 0;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%)

}



.footer-contact-card h6 {

    color: var(--whiteColor);

    font-size: 15px;

    font-weight: 600;

    font-family: var(--fontFamily2)

}



.footer-contact-card p {

    font-size: 14px

}



.footer-contact-card p a {

    color: #eee

}



.footer-contact-card p a:hover {

    color: var(--mainColor)

}



.footer-contact-card:hover i {

    border-color: var(--mainColor);

    color: var(--mainColor);

    -webkit-transform: rotateY(180deg) translateY(-50%);

    transform: rotateY(180deg) translateY(-50%)

}



.copyright {

    text-align: center;

    position: relative;

    border-top: 1px solid #eeeeee20;

    background-color: var(--blackColor)

}



.copyright p {

    color: rgba(255, 255, 255, .8);

    padding-top: 20px;

    padding-bottom: 20px;

    font-size: 15px;

    font-family: var(--fontFamily2)

}



.copyright p a {

    font-weight: 400;

    text-decoration: none;

    color: var(--mainColor)

}



.copyright p strong {

    color: var(--whiteColor)

}



.progress-wrap {

    position: fixed;

    right: 50px;

    bottom: 50px;

    height: 46px;

    width: 46px;

    cursor: pointer;

    display: block;

    border-radius: 50px;

    background-color: var(--whiteColor);

    -webkit-box-shadow: 0 0 30px 0 #96969696;

    box-shadow: 0 0 30px 0 #96969696;

    z-index: 10000;

    opacity: 0;

    visibility: hidden;

    -webkit-transform: translateY(15px);

    transform: translateY(15px);

    -webkit-transition: all 200ms linear;

    transition: all 200ms linear

}



.progress-wrap.active-progress {

    opacity: 1;

    visibility: visible;

    -webkit-transform: translateY(0);

    transform: translateY(0)

}



.progress-wrap::after {

    position: absolute;

    content: '↑';

    text-align: center;

    line-height: 46px;

    font-size: 24px;

    color: var(--mainColor);

    left: 0;

    top: 0;

    height: 46px;

    width: 46px;

    cursor: pointer;

    display: block;

    z-index: 1;

    -webkit-transition: all 200ms linear;

    transition: all 200ms linear

}



.progress-wrap:hover::after {

    opacity: 0

}



.progress-wrap::before {

    position: absolute;

    content: '↑';

    text-align: center;

    line-height: 46px;

    font-size: 30px;

    opacity: 0;

    left: 0;

    top: 0;

    height: 46px;

    width: 46px;

    cursor: pointer;

    display: block;

    z-index: 2;

    -webkit-transition: all 200ms linear;

    transition: all 200ms linear

}



.progress-wrap:hover::before {

    opacity: 1

}



.progress-wrap svg path {

    fill: none

}



.progress-wrap svg.progress-circle path {

    stroke: var(--mainColor);

    stroke-width: 4;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    -webkit-transition: all 200ms linear;

    transition: all 200ms linear

}



@-webkit-keyframes top-bottom {

    0% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

    50% {

        -webkit-transform: translateY(20px);

        transform: translateY(20px)

    }

}



@keyframes top-bottom {

    0% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

    50% {

        -webkit-transform: translateY(20px);

        transform: translateY(20px)

    }

}



.default-button {

    overflow: hidden;

    padding: 13px 35px;

    position: relative;

    display: inline-block;

    color: var(--whiteColor);

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    border: 1px solid #0d00ff50;

    background-color: var(--mainColor);

    font-size: 15px;

    font-weight: 400;

    font-family: var(--fontFamily2)

}



.default-button::before {

    content: '';

    width: 0;

    height: 50px;

    border-radius: 0 50% 50% 0;

    background-color: var(--blackColor);

    position: absolute;

    left: 60%;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    z-index: 0

}



.default-button::after {

    content: '';

    width: 0;

    height: 50px;

    border-radius: 50% 0% 0% 50%;

    background-color: var(--blackColor);

    position: absolute;

    right: 60%;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    z-index: 0

}



.default-button span {

    position: relative;

    z-index: 1

}



.default-button i {

    margin-left: 8px;

    position: relative;

    top: 3px

}



.default-button:hover {

    color: var(--whiteColor);

    border-radius: 25px;

    border-color: var(--blackColor)

}



.default-button:hover::before,

.default-button:hover::after {

    width: 100%

}



.default-button:hover::before {

    left: 50%

}



.default-button:hover::after {

    right: 50%

}



.default-button-2 {

    background-color: var(--whiteColor);

    color: var(--mainColor)

}



.default-button-3 {

    background-color: var(--whiteColor);

    color: var(--mainColor);

    border-color: #eee !important

}



.default-button-3::before,

.default-button-3::after {

    background-color: var(--mainColor)

}



.read-more-btn {

    display: inline-block;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    font-size: var(--fontSize);

    font-weight: 500

}



.read-more-btn i {

    margin-left: 5px;

    position: relative;

    top: 3px

}



.read-more-btn:hover {

    letter-spacing: 1px

}



.section-bottom-link {

    display: table;

    text-align: center;

    color: var(--mainColor);

    position: relative;

    padding-bottom: 2px;

    font-weight: 500;

    font-size: 15px;

    font-family: var(--fontFamily2);

    margin-left: auto;

    margin-right: auto;

    border-bottom: 1px solid

}



.section-bottom-link i {

    padding-left: 5px;

    position: relative;

    top: 4px

}



.button-middle {

    display: table;

    margin-left: auto;

    margin-right: auto

}



.section-footer-button {

    display: block;

    text-align: center

}



.default-section-title span {

    color: var(--mainColor);

    position: relative;

    margin-bottom: 5px;

    display: inline-block;

    letter-spacing: 1.5px;

    font-weight: 600;

    font-size: 14px;

    font-family: var(--fontFamily2)

}



.default-section-title h3 {

    margin-bottom: 15px;

    line-height: 1.4;

    color: var(--secondColor);

    font-size: 48px;

    font-weight: 700

}



.default-section-title h3:last-child {

    margin-bottom: 0

}



.default-section-title-middle {

    max-width: 600px;

    text-align: center;

    margin-left: auto;

    margin-right: auto

}



.color-title h3 {

    color: var(--whiteColor)

}



.color-title p {

    color: #eee

}



.main-banner {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-image: url(../images/banner/banner-1-bg.jpg)

}



.banner-text-area h6 {

    font-size: var(--fontSize);

    color: #31e231;

    position: relative;

    display: inline-block;

    font-family: var(--fontFamily2)

}



.banner-text-area h6::before {

    content: '';

    width: 100px;

    height: 1px;

    background-color: #31e231;

    position: absolute;

    left: 105%;

    bottom: 2px

}



.banner-text-area h1 {

    color: var(--whiteColor);

    margin-top: 12px;

    margin-bottom: 30px;

    font-size: 78px;

    font-weight: 700

}



.banner-text-area p {

    color: #eee

}



.banner-text-area .default-button {

    margin-top: 18px

}



.banner-img-area {

    position: relative;

    padding: 60px 0

}



.banner-img-area .secondary-img {

    position: absolute;

    right: 0;

    top: 0;

    z-index: 1;

    width: 50%

}



.banner-img-area .banner-img-slider-area {

    width: 70%

}



.banner-img-area .banner-img-slider-area .owl-dots {

    text-align: center;

    margin-top: 15px

}



.banner-img-area .banner-img-slider-area .owl-dots .owl-dot {

    width: 20px;

    height: 5px;

    margin: 0 5px;

    border-radius: 10px;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    background-color: var(--whiteColor)

}



.banner-img-area .banner-img-slider-area .owl-dots .active {

    width: 35px;

    background-color: var(--mainColor)

}



.features-card {

    background-color: #f9f9f9;

    padding: 30px 25px;

    margin-top: 30px

}



.features-card h4 {

    margin-top: 23px;

    margin-bottom: 12px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.features-card:hover img {

    -webkit-animation: bounce 1.5s infinite;

    animation: bounce 1.5s infinite

}



.about-text-area {

    padding-top: 50px;

    padding-bottom: 50px

}



.about-img-area {

    position: relative;

    background-size: cover;

    background-position: top center;

    background-repeat: no-repeat;

    background-image: url(../images/about/about1.jpg);

    height: 100%

}



.about-img-area img {

    display: none

}



.about-img-area::before {

    content: '';

    width: 100%;

    height: 20px;

    background-color: var(--whiteColor);

    position: absolute;

    top: 0;

    left: 0;

    z-index: 0

}



.about-img-area .about-img-text {

    padding: 25px 55px 30px;

    text-align: center;

    display: inline-block;

    background-color: var(--mainColor);

    position: absolute;

    left: 15%

}



.about-img-area .about-img-text i {

    color: #35dc36;

    font-size: 55px

}



.about-img-area .about-img-text h4 {

    color: #35dc36;

    font-size: 36px;

    font-weight: 600

}



.about-img-area .about-img-text p {

    font-size: 14px;

    color: #35dc36;

}



.about-img-area .about-img-text::before {

    content: '';

    width: 100%;

    height: 20px;

    -webkit-clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0 100%);

    clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0 100%);

    background-color: var(--mainColor);

    position: absolute;

    top: 0;

    right: 10%;

    z-index: 0

}



.service-card {

    margin-top: 30px;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor)

}



.service-card .service-card-img {

    overflow: hidden

}



.service-card .service-card-img img {

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out

}



.service-card .service-card-text-area {

    padding: 0 25px 30px

}



.service-card .service-card-text-area .main-icon {

    width: 60px;

    height: 60px;

    font-size: 33px;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--whiteColor);

    background-color: var(--mainColor);

    position: relative;

    margin-top: -30px

}



.service-card .service-card-text-area h4 {

    line-height: 1.4;

    margin-top: 20px;

    margin-bottom: 12px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.service-card:hover .service-card-img img {

    -webkit-transform: scale(1.1) rotate(2deg);

    transform: scale(1.1) rotate(2deg)

}



.service-card:hover .service-card-text-area .main-icon {

    -webkit-animation: jello 1s infinite;

    animation: jello 1s infinite

}



.working-process-card {

    margin-top: 30px;

    max-width: 400px

}



.working-process-card h6 {

    margin-bottom: 12px;

    font-size: 16px;

    font-weight: 600;

    font-family: var(--fontFamily2)

}



.working-process-card .dot {

    display: inline-block;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background-color: var(--mainColorShadow);

    position: relative;

    border: 1px solid var(--mainColor);

    margin-top: 10px;

    margin-bottom: 15px

}



.working-process-card .dot::before {

    content: '';

    width: 15px;

    height: 15px;

    border-radius: 50%;

    background-color: var(--mainColor);

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



.working-process-card h4 {

    line-height: 1.4;

    margin-bottom: 12px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.working-process-1 {

    overflow: hidden;

    position: relative

}



.working-process-1::before {

    content: '';

    width: 100%;

    height: 1px;

    background-color: var(--mainColorShadow);

    position: absolute;

    left: 50%;

    top: 61%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    z-index: -1

}



.ff-intro {

    position: relative;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-image: url(../images/ff-bg.jpg)

}



.ff-intro::before {

    content: '';

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, .7);

    position: absolute;

    left: 0;

    top: 0;

    z-index: 0

}



.ff-intro::after {

    content: '';

    width: 100%;

    height: 100px;

    background-color: var(--whiteColor);

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: 0

}



.ff-intro .container {

    position: relative;

    z-index: 1

}



.intro-video-play-area {

    display: block;

    text-align: end

}



.intro-video-play-area a {

    width: 80px;

    height: 80px;

    font-size: 25px;

    padding-left: 5px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--whiteColor);

    border: 5px solid var(--whiteColor);

    background-color: var(--mainColor);

    position: relative

}



.intro-video-play-area a::before {

    content: '';

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background-color: var(--mainColorShadow);

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    z-index: -1;

    -webkit-animation: breathe 5s infinite linear forwards;

    animation: breathe 5s infinite linear forwards

}



.intro-video-play-area a::after {

    content: '';

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background-color: var(--mainColorShadow);

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    z-index: -1;

    -webkit-animation: breathe 10s infinite linear forwards;

    animation: breathe 10s infinite linear forwards

}



.fun-fact-area {

    background-color: var(--whiteColor);

    padding: 40px 70px 0

}



.fun-fact-card {

    border: 1px solid #eee;

    padding: 30px;

    margin-top: 30px

}



.fun-fact-card i {

    font-size: 45px;

    color: var(--mainColor)

}



.fun-fact-card h2 {

    color: var(--mainColor);

    line-height: 1;

    margin-bottom: 0;

    font-size: 48px;

    font-weight: 700

}



.fun-fact-card h2 span {

    color: var(--blackColor)

}



.fun-fact-card:hover {

    -webkit-animation: bounce 1s 1;

    animation: bounce 1s 1

}



.pricing-card {

    margin-top: 30px;

    padding: 30px;

    background-color: #f9f9f9

}



.pricing-card h6 {

    margin-bottom: 12px;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    font-size: 20px;

    font-weight: 700

}



.pricing-card h2 {

    margin-bottom: 20px;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    font-size: 36px;

    font-weight: 700

}



.pricing-card ul {

    margin: 25px 0 0;

    padding: 0;

    list-style: none

}



.pricing-card ul li {

    margin-top: 15px;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.pricing-card ul li i {

    margin-right: 5px;

    font-size: 14px;

    position: relative;

    top: 2px;

    color: var(--mainColor)

}



.pricing-card ul .disable {

    color: var(--paragraphColor)

}



.pricing-card ul .disable i {

    color: var(--paragraphColor)

}



.pricing-card:hover h2,

.pricing-card:hover h6 {

    color: var(--mainColor)

}



.pricing-card:hover h2 {

    -webkit-animation: bounce 1.5s 1;

    animation: bounce 1.5s 1

}



.team-card {

    margin-top: 30px;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor);

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out

}



.team-card .team-card-text {

    padding: 30px

}



.team-card .team-card-text h4 {

    margin-bottom: 5px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.team-card .team-card-text p {

    font-size: 14px

}



.team-card .team-card-text .social-icons ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.team-card .team-card-text .social-icons ul li {

    display: inline-block

}



.team-card .team-card-text .social-icons ul li a {

    width: 40px;

    height: 40px;

    margin-right: 5px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--mainColor);

    background-color: #f8f8f8

}



.team-card .team-card-text .social-icons ul li a:hover {

    color: var(--whiteColor);

    -webkit-animation: jello 1.5s 1;

    animation: jello 1.5s 1;

    background-color: var(--mainColor)

}



.team-card:hover {

    -webkit-transform: translateY(-10px);

    transform: translateY(-10px)

}



.sign-up {

    position: relative;

    overflow: hidden;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}



.sign-up::before {

    content: '';

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, .4);

    position: absolute;

    left: 0;

    top: 0;

    z-index: 0

}



.sign-up::after {

    content: '';

    height: 100%;

    width: 33%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-image: url(../images/sign-up-bg-shape.jpg);

    position: absolute;

    right: 0;

    top: 0;

    z-index: 1

}



.sign-up-form-area {

    z-index: 2;

    padding: 40px 50px 50px;

    position: relative;

    background-color: var(--mainColor)

}



.sign-up-form-area .default-section-title h3 {

    margin-bottom: 0

}



.sign-up-form-area .default-section-title p {

    font-size: 15px

}



.sign-up-form-area form {

    margin-top: 25px

}



.sign-up-form-area form .form-control {

    margin-top: 15px;

    padding: 15px;

    color: var(--whiteColor);

    background-color: rgba(255, 255, 255, .2);

    font-size: 15px;

    font-family: var(--fontFamily2)

}



.sign-up-form-area form .form-control::-webkit-input-placeholder {

    color: var(--whiteColor)

}



.sign-up-form-area form .form-control:-ms-input-placeholder {

    color: var(--whiteColor)

}



.sign-up-form-area form .form-control::-ms-input-placeholder {

    color: var(--whiteColor)

}



.sign-up-form-area form .form-control::placeholder {

    color: var(--whiteColor)

}



.sign-up-form-area form .form-check {

    margin-top: 15px

}



.sign-up-form-area form .form-check label {

    color: #eee

}



.sign-up-form-area form .default-button {

    background-color: var(--blackColor);

    border-color: var(--blackColor);

    margin-top: 25px

}



.form-check-input:checked {

    background-color: var(--mainColor);

    border-color: var(--whiteColor) !important

}



.testimonial-card {

    background-color: #f9f9f9;

    padding: 30px 25px;

    margin-top: 30px

}



.testimonial-card p {

    font-style: italic;

    color: #212121

}



.testimonial-card .testimonial-intro-area {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-top: 25px

}



.testimonial-card .testimonial-intro-area img {

    border-radius: 50%;

    width: 70px;

    height: 70px;

    margin-right: 20px

}



.testimonial-card .testimonial-intro-area h6 {

    margin-bottom: 5px;

    font-size: 20px;

    font-weight: 700

}



.testimonial-card .testimonial-intro-area span {

    color: var(--paragraphColor);

    font-size: 14px;

    font-family: var(--fontFamily2)

}



.testimonial-slider-area .owl-dots {

    text-align: center

}



.testimonial-slider-area .owl-dots .owl-dot {

    width: 20px;

    height: 5px;

    margin: 30px 5px 0;

    border-radius: 15px;

    background-color: #5555557c;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out

}



.testimonial-slider-area .owl-dots .active {

    width: 25px;

    background-color: var(--mainColor)

}



.blog-card {

    margin-top: 30px;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor)

}



.blog-card .blog-card-img {

    overflow: hidden

}



.blog-card .blog-card-img img {

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    width: 100%

}



.blog-card .blog-card-text {

    padding: 30px

}



.blog-card .blog-card-text h4 {

    line-height: 1.4;

    margin-bottom: 12px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.blog-card:hover .blog-card-img img {

    -webkit-transform: scale(1.1) rotate(-2deg);

    transform: scale(1.1) rotate(-2deg)

}



.blog-date {

    display: block;

    margin-bottom: 15px;

    color: var(--paragraphColor);

    font-size: 15px;

    font-family: var(--fontFamily2)

}



.blog-date i {

    color: var(--mainColor);

    margin-right: 3px;

    font-size: 18px;

    position: relative;

    top: 3px

}



.newsletter {

    background-color: var(--mainColor);

    position: relative

}



.newsletter::before {

    content: '';

    width: 55%;

    height: 105%;

    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);

    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);

    background-color: var(--blackColor);

    position: absolute;

    right: 0;

    top: 0;

    z-index: 0

}



.newsletter .container {

    position: relative;

    z-index: 1

}



.newsletter .newsletter-text-area h3 {

    color: var(--whiteColor);

    margin-bottom: 0;

    font-size: 48px;

    font-weight: 700

}



.newsletter .newsletter-form-area .form-control {

    padding: 15px 20px;

    border: 1px solid var(--whiteColor) !important;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.newsletter .newsletter-form-area .default-button {

    border-radius: 0 !important;

    font-size: 20px;

    padding: 15px 25px 15px 20px;

    border: 0

}



.newsletter .newsletter-form-area .default-button::before,

.newsletter .newsletter-form-area .default-button::after {

    background-color: var(--mainColor)

}



.newsletter .validation-danger,

.newsletter .validation-success {

    color: var(--whiteColor)

}



.home-banner-single-slide {

    position: relative;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-image: url(../images/banner/banner-bg-2-1.jpg);

    padding-top: 180px;

    padding-bottom: 180px

}



.home-banner-single-slide::before {

    content: '';

    width: 100%;

    height: 100%;

    background-image: -webkit-gradient(linear, left top, right top, from(#000000a6), color-stop(#00000096), color-stop(#00000033), to(#00000000));

    background-image: linear-gradient(to right, #000000a6, #00000096, #00000033, #00000000);

    position: absolute;

    left: 0;

    top: 0;

    z-index: 0

}



.home-banner-single-slide .banner-text-area {

    position: relative;

    z-index: 2

}



.hbs-2 {

    background-image: url(../images/banner/banner-bg-2-2.jpg)

}



.hbs-3 {

    background-image: url(../images/banner/banner-bg-2-3.jpg)

}



.home-banner {

    position: relative;

    overflow: hidden

}



.home-banner .shape1 {

    position: absolute;

    left: 0;

    top: 0;

    z-index: 1

}



.home-banner .shape2 {

    position: absolute;

    right: 0;

    bottom: 0;

    z-index: 2

}



.home-banner-slider-area {

    position: relative

}



.home-banner-slider-area .owl-dots {

    position: absolute;

    right: 5%;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%)

}



.home-banner-slider-area .owl-dots .owl-dot {

    width: 30px;

    height: 30px;

    display: block;

    margin: 10px 0;

    border-radius: 50%;

    -webkit-transition: .5s ease;

    transition: .5s ease;

    border: 1px solid var(--whiteColor);

    position: relative

}



.home-banner-slider-area .owl-dots .owl-dot::before {

    content: '';

    width: 10px;

    height: 10px;

    border-radius: 50%;

    -webkit-transition: .5s ease;

    transition: .5s ease;

    background-color: var(--whiteColor);

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



.home-banner-slider-area .owl-dots .active {

    border-color: var(--mainColor)

}



.home-banner-slider-area .owl-dots .active::before {

    background-color: var(--mainColor)

}



.features-card-2 {

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    padding: 30px;

    margin-top: 30px

}



.features-card-2 .features-card-header {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: baseline;

    -ms-flex-align: baseline;

    align-items: baseline;

    margin-bottom: 10px

}



.features-card-2 .features-card-header span {

    color: var(--mainColor);

    font-size: 36px;

    font-weight: 700;

    font-family: var(--fontFamily)

}



.features-card-2 .features-card-header h4 {

    position: relative;

    padding-left: 40px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.features-card-2 .features-card-header h4::before {

    content: '';

    width: 30px;

    height: 2px;

    background-color: #d7d5d5;

    position: absolute;

    left: 5px;

    bottom: 5px

}



.features-card-2:hover {

    background-color: #f9f9f9

}



.service-card-2 {

    padding: 15px;

    margin-top: 30px;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor)

}



.service-card-2 .service-card-img-2 {

    overflow: hidden

}



.service-card-2 .service-card-img-2 img {

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out

}



.service-card-2 .service-card-text-2 {

    padding: 20px 15px 10px

}



.service-card-2 .service-card-text-2 .service-card-text-header {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-bottom: 10px

}



.service-card-2 .service-card-text-2 .service-card-text-header i {

    color: var(--mainColor);

    margin-right: 20px;

    font-size: 40px

}



.service-card-2 .service-card-text-2 .service-card-text-header h4 {

    margin-bottom: 0;

    line-height: 1.4;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.service-card-2:hover .service-card-img-2 img {

    -webkit-transform: scale(1.1) rotate(2deg) translateY(-10px);

    transform: scale(1.1) rotate(2deg) translateY(-10px)

}



.service-card-2:hover .service-card-text-2 .service-card-text-header i {

    -webkit-animation: bounce 1.5s infinite;

    animation: bounce 1.5s infinite

}



.service-slider-area-2 .owl-dots {

    text-align: center;

    margin-top: 30px

}



.service-slider-area-2 .owl-dots .owl-dot {

    width: 30px;

    height: 30px;

    margin: 0 5px;

    border-radius: 50%;

    -webkit-transition: .5s ease;

    transition: .5s ease;

    border: 1px solid #cbcbcb;

    position: relative

}



.service-slider-area-2 .owl-dots .owl-dot::before {

    content: '';

    width: 10px;

    height: 10px;

    border-radius: 50%;

    -webkit-transition: .5s ease;

    transition: .5s ease;

    background-color: #cbcbcb;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



.service-slider-area-2 .owl-dots .active {

    border-color: var(--mainColor)

}



.service-slider-area-2 .owl-dots .active::before {

    background-color: var(--mainColor)

}



.working-process-card-2 {

    padding: 0 30px 25px;

    margin-top: 60px;

    position: relative;

    border: 1px solid #eee;

    background-color: var(--whiteColor);

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out

}



.working-process-card-2 span {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border: 2px solid var(--mainColor);

    background-color: var(--whiteColor);

    position: relative;

    margin-left: auto;

    margin-top: -25px;

    font-size: var(--card-title-fontSize);

    font-family: var(--fontFamily);

    font-weight: 700

}



.working-process-card-2 .working-process-title-2 {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-top: 35px;

    margin-bottom: 25px

}



.working-process-card-2 .working-process-title-2 img {

    margin-right: 20px

}



.working-process-card-2 .working-process-title-2 h4 {

    margin-bottom: 0;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.working-process-card-2:hover {

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    border-color: var(--whiteColor)

}



.pricing-card-2 h2 {

    margin-top: 20px

}



.pricing-card-2 h2 sub {

    color: var(--paragraphColor);

    position: relative;

    bottom: 0;

    font-size: 15px;

    font-weight: 400

}



.pricing-card-2 ul li {

    margin-top: 22px

}



.pricing-card-2 ul li i {

    width: 25px;

    height: 25px;

    margin-right: 10px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    background-color: var(--mainColorShadow)

}



.pricing-card-2 ul li:first-child {

    margin-top: 10px

}



.pricing-card-2 ul .disable i {

    background-color: #88888830

}



.pricing-card-2 .default-button {

    margin-top: 30px

}



.team-card-2 {

    margin-top: 30px;

    padding: 15px;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor)

}



.team-card-2 .team-card-text-2 {

    padding: 20px 20px 5px;

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between

}



.team-card-2 .team-card-text-2 h4 {

    margin-bottom: 5px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.team-card-2 .team-card-text-2 p {

    font-size: 14px

}



.team-card-2 .team-card-text-2 .social-icons {

    text-align: end;

    position: relative

}



.team-card-2 .team-card-text-2 .social-icons ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.team-card-2 .team-card-text-2 .social-icons ul li .team-share {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-top: 0;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--mainColor);

    background-color: #f8f8f8;

    position: relative;

    z-index: 2;

    cursor: pointer

}



.team-card-2 .team-card-text-2 .social-icons ul li a {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-top: -10px;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--mainColor);

    background-color: #f8f8f8;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    position: absolute;

    right: 0;

    bottom: 0

}



.team-card-2 .team-card-text-2 .social-icons ul li a:hover {

    color: var(--whiteColor);

    -webkit-animation: jello 1.5s 1;

    animation: jello 1.5s 1;

    background-color: var(--mainColor)

}



.team-card-2 .team-card-text-2 .social-icons ul:hover li:nth-child(4) a {

    bottom: 50px

}



.team-card-2 .team-card-text-2 .social-icons ul:hover li:nth-child(3) a {

    bottom: 100px

}



.team-card-2 .team-card-text-2 .social-icons ul:hover li:nth-child(2) a {

    bottom: 150px

}



.team-card-2 .team-card-text-2 .social-icons ul:hover li:nth-child(1) a {

    bottom: 200px

}



.team-slider-area-2 .owl-dots {

    text-align: center;

    margin-top: 30px

}



.team-slider-area-2 .owl-dots .owl-dot {

    width: 30px;

    height: 30px;

    margin: 0 5px;

    border-radius: 50%;

    -webkit-transition: .5s ease;

    transition: .5s ease;

    border: 1px solid #cbcbcb;

    position: relative

}



.team-slider-area-2 .owl-dots .owl-dot::before {

    content: '';

    width: 10px;

    height: 10px;

    border-radius: 50%;

    -webkit-transition: .5s ease;

    transition: .5s ease;

    background-color: #cbcbcb;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



.team-slider-area-2 .owl-dots .active {

    border-color: var(--mainColor)

}



.team-slider-area-2 .owl-dots .active::before {

    background-color: var(--mainColor)

}



.team-slider-area-2 .center .team-card-2 .team-card-text-2 .social-icons ul li:nth-child(4) a {

    bottom: 50px

}



.team-slider-area-2 .center .team-card-2 .team-card-text-2 .social-icons ul li:nth-child(3) a {

    bottom: 100px

}



.team-slider-area-2 .center .team-card-2 .team-card-text-2 .social-icons ul li:nth-child(2) a {

    bottom: 150px

}



.team-slider-area-2 .center .team-card-2 .team-card-text-2 .social-icons ul li:nth-child(1) a {

    bottom: 200px

}



.testimonial-slider-area-2 .owl-dots {

    text-align: center;

    margin-top: 30px

}



.testimonial-slider-area-2 .owl-dots .owl-dot {

    width: 30px;

    height: 30px;

    margin: 0 5px;

    border-radius: 50%;

    -webkit-transition: .5s ease;

    transition: .5s ease;

    border: 1px solid #cbcbcb;

    position: relative

}



.testimonial-slider-area-2 .owl-dots .owl-dot::before {

    content: '';

    width: 10px;

    height: 10px;

    border-radius: 50%;

    -webkit-transition: .5s ease;

    transition: .5s ease;

    background-color: #cbcbcb;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%)

}



.testimonial-slider-area-2 .owl-dots .active {

    border-color: var(--mainColor)

}



.testimonial-slider-area-2 .owl-dots .active::before {

    background-color: var(--mainColor)

}



.blog-card-2 {

    padding: 15px

}



.blog-card-2 .blog-card-text {

    padding-bottom: 15px

}



.banner {

    overflow: hidden

}



.banner-text-area-3 {

    max-width: 790px;

    margin-left: auto;

    padding-top: 180px;

    padding-bottom: 180px;

    padding-left: 15px

}



.banner-text-area-3 h6::before {

    display: none

}



.banner-text-area-3 h1 {

    color: var(--blackColor)

}



.banner-text-area-3 p {

    color: var(--paragraphColor)

}



.banner-img-area-3 {

    position: relative;

    height: 100%

}



.banner-img-area-3 .swiper {

    height: 100%

}



.banner-img-area-3 .swiper-pagination {

    text-align: end;

    padding-right: 10%

}



.banner-img-area-3 .swiper-pagination span {

    color: var(--whiteColor);

    font-family: var(--fontFamily2)

}



.banner-img-area-3 .swiper-pagination .swiper-pagination-current {

    font-size: 35px;

    position: relative

}



.banner-img-area-3 .swiper-pagination .swiper-pagination-current::before {

    content: '/';

    color: var(--whiteColor);

    position: absolute;

    right: -15px;

    top: 10px;

    font-size: 25px

}



.banner-img-area-3 .video-popup {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--whiteColor);

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    border: 10px solid var(--whiteColor);

    background-color: var(--mainColor);

    position: absolute;

    left: -45px;

    bottom: 10%;

    z-index: 2

}



.banner-3-image-area-single-slider {

    background-size: cover;

    background-position: top center;

    background-repeat: no-repeat;

    background-image: url(../images/banner/banner-3-1.jpg);

    position: relative;

    height: 100%

}



.banner-3-image-area-single-slider img {

    display: none

}



.bsi-3-2 {

    background-image: url(../images/banner/banner-3-2.jpg)

}



.bsi-3-3 {

    background-image: url(../images/banner/banner-3-3.jpg)

}



.features-card-3 {

    margin-top: 30px;

    background-color: #f9f9f9;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out

}



.features-card-3 .features-card-text-area {

    padding: 30px

}



.features-card-3 .features-card-text-area .features-card-header-3 {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-bottom: 15px

}



.features-card-3 .features-card-text-area .features-card-header-3 img {

    margin-right: 20px;

    width: 50px;

    height: 50px

}



.features-card-3 .features-card-text-area .features-card-header-3 h4 {

    margin-bottom: 0;

    line-height: 1.4;

    font-weight: 700;

    font-size: var(--card-title-fontSize)

}



.features-card-3:hover {

    -webkit-transform: translateY(-10px) rotate(1deg);

    transform: translateY(-10px) rotate(1deg)

}



.about-img-area-3 {

    position: relative;

    padding-top: 15px;

    padding-left: 15px

}



.about-img-area-3::before {

    content: '';

    width: 85%;

    height: 85%;

    background-color: var(--mainColor);

    position: absolute;

    left: 0;

    top: 0;

    z-index: -1

}



.about-img-area-3 .about-img-text-3 {

    padding: 15px 25px;

    display: inline-block;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor);

    position: absolute;

    left: 0;

    bottom: 5%

}



.about-img-area-3 .about-img-text-3 h3 {

    margin-bottom: 5px;

    color: var(--mainColor);

    font-size: 36px;

    font-weight: 700;

    font-family: var(--fontFamily2)

}



.about-img-area-3 .about-img-text-3 p {

    font-size: 14px

}



.about-text-area-3 {

    padding-top: 0;

    padding-bottom: 0

}



.about-text-area-3 .about-list {

    margin-top: 25px

}



.about-list ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.about-list ul li {

    position: relative;

    padding-left: 30px;

    margin-top: 15px;

    color: var(--blackColor);

    font-weight: 500;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.about-list ul li::before {

    content: '';

    width: 15px;

    height: 15px;

    border-radius: 50%;

    background-color: var(--mainColor);

    position: absolute;

    left: 0;

    top: 3px

}



.service-card-3 {

    margin-top: 30px

}



.service-card-3 .service-card-img-3 {

    overflow: hidden

}



.service-card-3 .service-card-img-3 img {

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    width: 100%

}



.service-card-3 .service-card-text-3 {

    padding: 30px;

    text-align: center;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor);

    max-width: 80%;

    position: relative;

    z-index: 1;

    margin-left: auto;

    margin-right: auto;

    margin-top: -100px

}



.service-card-3 .service-card-text-3 h4 {

    margin-bottom: 12px;

    line-height: 1.4;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.service-card-3 .service-card-text-3 .default-button {

    margin-top: 15px

}



.service-card-3:hover .service-card-img-3 img {

    -webkit-transform: scale(1.1);

    transform: scale(1.1)

}



.service-card-3:hover .service-card-text-3 {

    -webkit-animation: jello 1.5s 1;

    animation: jello 1.5s 1

}



.section-bottom-text {

    margin-top: 30px;

    text-align: center;

    display: block;

    overflow: hidden;

    position: relative;

    color: var(--paragraphColor);

    font-size: 15px;

    font-family: var(--fontFamily2)

}



.section-bottom-text::before {

    content: '';

    width: 35%;

    height: 1px;

    background-color: #e2e1e1;

    position: absolute;

    left: 0;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%)

}



.section-bottom-text::after {

    content: '';

    width: 35%;

    height: 1px;

    background-color: #e2e1e1;

    position: absolute;

    right: 0;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%)

}



.section-bottom-text a {

    color: var(--mainColor)

}



.section-bottom-text a i {

    margin-left: 5px;

    position: relative;

    top: 4px

}



.working-process-card-3 {

    padding: 30px;

    margin-top: 30px;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor);

    position: relative

}



.working-process-card-3 span {

    position: absolute;

    right: 5%;

    top: 5%;

    color: rgba(0, 0, 0, .1);

    font-size: 64px;

    font-weight: 600;

    font-family: var(--fontFamily2)

}



.working-process-card-3 h6 {

    width: 60px;

    height: 60px;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--whiteColor);

    background-color: var(--mainColor);

    font-size: var(--card-title-fontSize);

    font-family: var(--fontFamily2)

}



.working-process-card-3 h4 {

    line-height: 1.4;

    margin-top: 15px;

    margin-bottom: 12px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.working-process-card-3:hover h6 {

    -webkit-animation: jello 1.5s infinite;

    animation: jello 1.5s infinite

}



.pricing-card-3 {

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out

}



.pricing-card-3 h6 {

    text-align: center

}



.pricing-card-3 h2 {

    border-bottom: 1px solid #eee;

    text-align: center;

    padding-bottom: 20px;

    -webkit-animation: none !important;

    animation: none !important

}



.pricing-card-3 .default-button {

    margin-top: 35px

}



.pricing-card-3:hover {

    background-color: var(--whiteColor);

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow)

}



.team-card-3 {

    margin-top: 30px

}



.team-card-3 .team-card-3-img {

    position: relative

}



.team-card-3 .team-card-3-img .social-icons {

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    text-align: center;

    position: absolute;

    bottom: 0%;

    z-index: 2;

    width: 100%;

    opacity: 0;

    -webkit-transform: rotate(10deg);

    transform: rotate(10deg)

}



.team-card-3 .team-card-3-img .social-icons ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.team-card-3 .team-card-3-img .social-icons ul li {

    display: inline-block

}



.team-card-3 .team-card-3-img .social-icons ul li a {

    width: 40px;

    height: 40px;

    margin-right: 5px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--mainColor);

    background-color: #f8f8f8

}



.team-card-3 .team-card-3-img .social-icons ul li a:hover {

    color: var(--whiteColor);

    -webkit-animation: jello 1.5s 1;

    animation: jello 1.5s 1;

    background-color: var(--mainColor)

}



.team-card-3 .team-card-3-img::before {

    content: '';

    width: 100%;

    height: 0%;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    background-color: rgba(0, 0, 0, .4);

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: 0

}



.team-card-3 .team-card-text {

    position: relative;

    z-index: 2;

    width: 90%;

    padding: 30px;

    text-align: center;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor);

    margin-left: auto;

    margin-right: auto;

    margin-top: -50px

}



.team-card-3 .team-card-text h4 {

    margin-bottom: 5px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.team-card-3 .team-card-text p {

    font-size: 14px

}



.team-card-3:hover .team-card-3-img::before {

    height: 100%

}



.team-card-3:hover .team-card-3-img .social-icons {

    bottom: 25%;

    opacity: 1;

    -webkit-transform: rotate(0);

    transform: rotate(0)

}



.testimonial-card-3 {

    padding: 35px;

    margin-top: 30px;

    position: relative;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    background-color: var(--whiteColor);

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow)

}



.testimonial-card-3 i {

    font-size: 45px;

    color: var(--mainColor);

    position: absolute;

    right: 8%;

    top: 8%

}



.testimonial-card-3 p {

    font-size: 17px;

    font-style: italic

}



.testimonial-card-3 .testimonial-intro-area {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin-bottom: 25px

}



.testimonial-card-3 .testimonial-intro-area img {

    border-radius: 50%;

    width: 70px;

    height: 70px;

    margin-right: 20px

}



.testimonial-card-3 .testimonial-intro-area h6 {

    margin-bottom: 5px;

    font-size: 20px;

    font-weight: 700

}



.testimonial-card-3 .testimonial-intro-area span {

    color: var(--paragraphColor);

    font-size: 14px;

    font-family: var(--fontFamily2)

}



.testimonial-card-3:hover {

    background-color: #f9f9f9;

    -webkit-box-shadow: none;

    box-shadow: none

}



.testimonial-card-3:hover i {

    -webkit-animation: bounce 1.5s infinite;

    animation: bounce 1.5s infinite

}



.blog-card-3 {

    background-color: transparent;

    -webkit-box-shadow: none;

    box-shadow: none

}



.blog-card-3 .blog-card-text {

    width: 90%;

    position: relative;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor);

    margin-top: -70px;

    margin-left: auto;

    margin-right: auto

}



.blog-card-3 .blog-card-text .default-button {

    margin-top: 15px

}



.uni-banner {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-image: url(../images/inner-images/uni-banner-bg-1.jpg);

    position: relative;

    padding-top: 100px;

    padding-bottom: 100px

}



.uni-banner::before {

    content: '';

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, .7);

    position: absolute;

    left: 0;

    top: 0;

    z-index: 0

}



.blog-uni-banner {

    background-image: url(../images/inner-images/uni-banner-bg-2.jpg)

}



.uni-banner-text-area {

    position: relative;

    z-index: 1

}



.uni-banner-text-area h1 {

    color: var(--whiteColor);

    margin-bottom: 12px;

    font-size: 48px;

    font-weight: 700

}



.uni-banner-text-area ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.uni-banner-text-area ul li {

    display: inline-block;

    color: #31e231 !important;

    position: relative;

    margin-right: 30px;

    font-weight: 500;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.uni-banner-text-area ul li a {

    color: var(--whiteColor)

}



.uni-banner-text-area ul li::before {

    content: '/';

    position: absolute;

    right: -21px;

    font-size: 14px;

    top: 3px

}



.uni-banner-text-area ul li:last-child {

    margin-right: 0

}



.uni-banner-text-area ul li:last-child::before {

    display: none

}



.paginations {

    display: table;

    margin-top: 40px;

    margin-left: auto;

    margin-right: auto

}



.paginations ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.paginations ul li {

    display: inline-block

}



.paginations ul li a {

    width: 35px;

    height: 35px;

    border-radius: 5px;

    margin-right: 5px;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    -webkit-box-shadow: 0 5px 10px #ccc;

    box-shadow: 0 5px 10px #ccc;

    overflow: hidden;

    position: relative;

    padding-top: 3px;

    font-family: var(--fontFamily2);

    font-size: var(--fontSize);

    font-weight: 700

}



.paginations ul li a:hover {

    -webkit-box-shadow: 0 -5px 10px #ccc;

    box-shadow: 0 -5px 10px #ccc;

    color: var(--whiteColor);

    background-color: var(--blackColor)

}



.paginations ul li a:hover::before {

    height: 100%;

    bottom: 0;

    top: unset

}



.paginations ul li a::before {

    content: '';

    width: 100%;

    height: 0%;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    background-color: var(--mainColor);

    position: absolute;

    left: 0;

    top: 0;

    bottom: unset;

    z-index: 0

}



.paginations ul li a span {

    position: relative;

    z-index: 1

}



.paginations ul .active a {

    color: var(--whiteColor);

    background-color: var(--mainColor)

}



.paginations ul .active a::before {

    height: 100%

}



.sidebar-card {

    padding: 25px 25px 30px;

    border: 1px solid #cdcdcd3a;

    background-color: #f9f9f9

}



.sidebar-card h3 {

    margin-bottom: 15px;

    font-size: 30px;

    font-weight: 700

}



.sidebar-services ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.sidebar-services ul li a {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    border: 1px solid #cdcdcd3a;

    background-color: #f9f9f9;

    margin-top: 15px;

    padding: 15px 20px;

    font-family: var(--fontFamily);

    font-size: 18px;

    font-weight: 700

}



.sidebar-services ul li a i {

    position: relative;

    top: 3px

}



.sidebar-services ul li a:hover {

    background-color: var(--mainColor);

    color: var(--whiteColor)

}



.sidebar-services ul li .active {

    background-color: var(--mainColor);

    color: var(--whiteColor)

}



.sidebar-services ul li:first-child a {

    margin-top: 0

}



.sidebar-download .default-button {

    margin-top: 10px;

    border-color: var(--mainColor) !important

}



.sidebar-download .default-button::before,

.sidebar-download .default-button::after {

    background-color: var(--mainColor)

}



.sidebar-download .default-button i {

    font-size: 25px;

    top: 5px;

    margin-left: 0;

    margin-right: 10px

}



.search-box .input-group {

    border-radius: 0;

    overflow: hidden;

    border: 1px solid #eee

}



.search-box .form-control {

    background-color: var(--whiteColor);

    border: 0 !important;

    padding: 15px;

    border-radius: 0;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.search-box .form-control::-webkit-input-placeholder {

    color: var(--paragraphColor)

}



.search-box .form-control:-ms-input-placeholder {

    color: var(--paragraphColor)

}



.search-box .form-control::-ms-input-placeholder {

    color: var(--paragraphColor)

}



.search-box .form-control::placeholder {

    color: var(--paragraphColor)

}



.search-box .btn {

    border-radius: 0 !important;

    padding: 15px 20px 9px;

    color: var(--whiteColor);

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    background-color: var(--mainColor)

}



.search-box .btn:hover {

    background-color: var(--blackColor)

}



.sidebar-categories ul {

    margin: 20px 0 0;

    padding: 0;

    list-style: none

}



.sidebar-categories ul li {

    margin-top: 15px

}



.sidebar-categories ul li a {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between

}



.sidebar-categories ul li a span {

    color: var(--paragraphColor);

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.sidebar-categories ul li a span i {

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    color: var(--blackColor);

    margin-right: 5px;

    position: relative;

    top: 3px

}



.sidebar-categories ul li a .post-amount {

    width: 30px;

    height: 30px;

    font-size: 14px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    background-color: #eee;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out

}



.sidebar-categories ul li a:hover span {

    color: var(--mainColor)

}



.sidebar-categories ul li a:hover span i {

    color: var(--mainColor)

}



.sidebar-categories ul li a:hover .post-amount {

    color: var(--whiteColor);

    background-color: var(--mainColor)

}



.sidebar-tag h3 {

    margin-bottom: 5px

}



.sidebar-tag ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.sidebar-tag ul li {

    display: inline-block

}



.sidebar-tag ul li a {

    padding: 7px 20px;

    border-radius: 0;

    display: inline-block;

    border: 1px solid #eee;

    color: var(--paragraphColor);

    font-size: 14px;

    font-family: var(--fontFamily2);

    margin-right: 10px;

    margin-top: 15px

}



.sidebar-tag ul li a:hover {

    color: var(--whiteColor);

    background-color: var(--mainColor)

}



.details-page-text-area .details-page-main-img {

    margin-bottom: 20px;

    width: 100%

}



.details-page-text-area h3 {

    line-height: 1.4;

    margin-bottom: 12px;

    font-size: 36px;

    font-weight: 700

}



.details-page-text-area .details-page-text-img-area {

    margin-top: 25px;

    margin-bottom: 10px

}



.details-page-text-area .details-page-text-img-area img {

    margin-bottom: 20px

}



.details-page-text-area h4 {

    margin-bottom: 12px;

    font-size: 26px;

    font-weight: 700

}



.details-page-text-area .about-list {

    margin-bottom: 20px

}



.login-form form label {

    color: var(--blackColor);

    font-family: var(--fontFamily);

    font-size: var(--card-title-fontSize);

    font-weight: 600

}



.login-form form .form-control {

    border: 1px solid #eee !important;

    padding: 12px 15px

}



.login-form form .form-check label {

    font-weight: 500;

    font-size: 14px;

    font-family: var(--fontFamily)

}



.login-form form .default-button {

    width: 100%;

    border: 0

}



.login-form form .form-footer {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between

}



.login-form form .form-footer a {

    margin-bottom: 15px;

    display: inline-block;

    font-weight: 500;

    font-size: 14px;

    font-family: var(--fontFamily)

}



.login-form p {

    font-size: 15px;

    font-style: italic;

    font-family: var(--fontFamily)

}



.login-form .optional-link {

    font-size: 15px;

    margin-top: 5px

}



.login-form .optional-link a {

    color: var(--mainColor);

    font-weight: 500

}



.form-check-input:checked {

    border-color: var(--mainColor);

    background-color: var(--mainColor)

}



.terms {

    margin-bottom: -15px

}



.terms strong {

    color: var(--blackColor)

}



.terms a {

    color: var(--mainColor)

}



.terms h1,

.terms h2,

.terms h3,

.terms h4,

.terms h5 {

    margin-top: 25px;

    margin-bottom: 15px;

    font-family: var(--fontFamily);

    font-weight: 600

}



.terms h6 {

    font-size: 20px;

    font-weight: 600;

    font-family: var(--fontFamily)

}



.terms h1 {

    font-size: 30px

}



.terms h2 {

    font-size: 28px

}



.terms h3 {

    font-size: 26px

}



.terms h4 {

    font-size: 24px

}



.terms h5 {

    font-size: 22px

}



.terms p {

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.terms ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.terms ul li {

    margin: 10px 0;

    font-size: var(--fontSize);

    color: var(--paragraphColor);

    font-family: var(--fontFamily2)

}



.terms ul li span {

    font-weight: 700;

    margin-right: 8px;

    color: var(--blackColor)

}



.terms .payment li {

    position: relative;

    padding-left: 20px

}



.terms .payment li::before {

    content: '';

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background-color: var(--mainColor);

    position: absolute;

    left: 0;

    top: 6px

}



.border-b {

    border-top: 1px solid #eee

}



.error-content {

    max-width: 600px;

    text-align: center;

    margin-left: auto;

    margin-right: auto

}



.error-content h4 {

    line-height: 1.4;

    margin-top: 25px;

    margin-bottom: 12px;

    font-size: 36px;

    font-weight: 700

}



.error-content .input-group {

    border-radius: 25px !important;

    background-color: #f8f8f8

}



.error-content .input-group .form-control {

    border: 0 !important;

    border-radius: 25px;

    padding: 15px;

    background-color: #f9f9f9

}



.error-content .input-group .btn {

    width: 40px;

    height: 40px;

    margin-top: 8px;

    margin-right: 8px;

    border-radius: 50% !important;

    color: var(--whiteColor);

    background-color: var(--mainColor)

}



.error-content .default-button {

    margin-top: 15px

}



.accordion-item {

    border: 0;

    background-color: #f9f9f9;

    margin-top: 25px;

    padding: 0 25px 5px

}



.accordion-item .accordion-body {

    background-color: transparent;

    padding: 0;

    padding-bottom: 15px

}



.accordion-item .accordion-body p {

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.accordion-button {

    border: 0 !important;

    min-height: 30px;

    position: relative;

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    color: var(--secondColor) !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    background-color: #f9f9f9 !important;

    padding: 15px 35px 15px 0;

    border-radius: 5px !important;

    font-size: 20px;

    font-weight: 600;

    font-family: var(--fontFamily)

}



.accordion-button i {

    width: 30px;

    height: 30px;

    font-size: 15px;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--secondColor);

    -webkit-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    position: absolute;

    right: 0

}



.accordion-button::after {

    display: none

}



.accordion-button .fa-plus {

    z-index: 0;

    font-size: 0

}



.accordion-button:not(.collapsed) {

    margin-bottom: 0

}



.accordion-button:not(.collapsed) i {

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

    color: var(--mainColor)

}



.accordion-button:not(.collapsed) .fa-plus {

    z-index: 2;

    font-size: 15px

}



.faq-contact-form {

    padding: 50px;

    background-color: #f9f9f9;

    position: relative;

    margin-top: 50px;

    margin-bottom: 50px;

    margin-left: -150px

}



.faq-contact-form .form-control {

    background-color: #f9f9f9;

    border: 1px solid #eee !important;

    padding: 15px;

    margin-bottom: 15px

}



.faq-contact-img-area {

    background-size: cover;

    background-position: top center;

    background-repeat: no-repeat;

    background-image: url(../images/inner-images/faq-contact-img.jpg);

    height: 100%

}



.faq-contact-img-area img {

    display: none

}



.faq-contact .section-content {

    margin-top: 60px

}



.blog-details-text-area h4 {

    margin-top: 25px;

    margin-bottom: 15px

}



.blog-details-text-area .blog-list {

    margin-bottom: 20px

}



.blog-details-text-area .blog-list ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.blog-details-text-area .blog-list ul li {

    margin-top: 15px;

    font-size: 13px;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.blog-details-text-area .blog-list ul li i {

    color: var(--mainColor);

    margin-right: 10px;

    position: relative;

    top: 3px

}



.bd-comments {

    margin-top: 30px;

    padding: 30px;

    border-bottom: 1px solid #eee;

    background-color: #f9f9f9

}



.bd-comments h3 {

    font-size: var(--card-title-fontSize);

    font-weight: 600

}



.bd-form {

    padding: 30px;

    background-color: #f9f9f9

}



.bd-form h3 {

    font-size: var(--card-title-fontSize);

    font-weight: 600

}



.bd-form .form-control {

    border: 1px solid #eee !important;

    margin-top: 10px;

    margin-bottom: 15px;

    padding: 15px;

    border-radius: 5px;

    background-color: var(--whiteColor)

}



.bd-form .form-check label {

    color: var(--paragraphColor);

    font-size: 14px;

    font-family: var(--fontFamily2)

}



.bd-form .default-button {

    margin-top: 15px

}



.comment-card {

    margin-top: 30px;

    position: relative;

    padding-left: 95px

}



.comment-card img {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    position: absolute;

    left: 0

}



.comment-card h5 {

    margin-bottom: 3px;

    font-weight: 600;

    font-size: 17px

}



.comment-card span {

    color: #707070c0;

    margin-bottom: 10px;

    font-weight: 400;

    font-size: 14px;

    font-family: var(--fontFamily2)

}



.comment-card p {

    margin-top: 10px;

    margin-bottom: 10px

}



.comment-card .reply-button {

    color: var(--mainColor);

    font-weight: 600;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.product-page-topbar .ppt-right-area {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: end;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



.product-page-topbar .ppt-right-area .input-group {

    max-width: 300px;

    margin-right: 25px;

    border-radius: 0 !important;

    background-color: #f9f9f9 !important

}



.product-page-topbar .ppt-right-area .input-group .default-button {

    border: 0 !important;

    padding: 12px 20px !important;

    border-radius: 0 !important;

    margin: 7px

}



.product-page-topbar .ppt-right-area .form-select {

    padding: 15px;

    max-width: 300px;

    border-radius: 0 !important;

    background-color: var(--whiteColor);

    border: 1px solid #eee !important;

    font-size: 15px;

    font-family: var(--fontFamily2)

}



.product-page-topbar .ppt-right-area .form-select .current {

    color: var(--paragraphColor)

}



.product-page-topbar .ppt-right-area .form-select::after {

    display: none

}



.product-card {

    margin-top: 30px

}



.product-card .product-card-text-area {

    padding-top: 20px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between

}



.product-card .product-card-text-area .product-info h4 {

    margin-bottom: 10px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.product-card .product-card-text-area .product-info p {

    font-size: 14px

}



.product-card .product-card-text-area .product-cart-btn {

    width: 40px;

    height: 40px;

    padding-top: 4px;

    font-size: 18px;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border: 1px solid var(--mainColorShadow)

}



.product-card .product-card-text-area .product-cart-btn:hover {

    color: var(--whiteColor);

    background-color: var(--mainColor)

}



.price-range-bar {

    border: 0 !important;

    background: var(--whiteColor);

    height: 5px;

    width: 100%;

    margin-left: 0;

    margin-bottom: 25px;

    position: relative

}



.price-range-bar .ui-slider-range {

    background: var(--mainColor)

}



.price-range-bar .ui-slider-handle {

    border: none;

    border-radius: 50%;

    background: #fff;

    border: 2px solid var(--mainColor);

    height: 15px;

    width: 15px;

    top: -5px;

    cursor: pointer;

    background: var(--mainColor);

    position: absolute

}



.price-range-bar .ui-slider-handle:focus {

    outline: 0

}



.price-range-filter .btn {

    padding: 10px 35px;

    background-color: var(--mainColor);

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    -webkit-transition: .5s;

    transition: .5s;

    -webkit-box-shadow: none;

    box-shadow: none

}



.price-range-filter .btn:hover {

    background-color: var(--mainColor)

}



.price-range-filter-button {

    margin-top: 15px

}



.price-range-filter-item h4 {

    font-size: 15px;

    font-weight: 600;

    color: var(--blackColor);

    margin-bottom: 0

}



.price-range-filter-item input {

    width: 100%;

    border: 0;

    border-radius: 0;

    text-align: start;

    margin: 0 10px;

    font-size: 16px;

    font-weight: 600;

    color: var(--mainColor);

    background-color: transparent

}



.price-range-filter-item input.input {

    width: 100%;

    border: 0;

    border-radius: 0;

    text-align: left;

    font-size: 16px;

    font-weight: 600;

    color: var(--mainColor);

    background-color: transparent

}



.stars {

    margin: 0;

    padding: 0;

    list-style: none

}



.stars li {

    display: inline-block;

    margin: 0 0;

    color: #f3cf11

}



.pdit-list ul {

    margin: 20px 0 0;

    padding: 0;

    list-style: none

}



.pdit-list ul li {

    margin-top: 12px;

    color: var(--paragraphColor);

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.pdit-list ul li span {

    font-weight: 600;

    width: 120px;

    display: inline-block;

    color: var(--blackColor)

}



.pdit-list ul li span:first-child {

    font-family: var(--fontFamily)

}



.product-info-image-area {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-image: url(../images/products/product1.jpg);

    height: 100%;

    border: 1px solid #eee

}



.product-info-image-area img {

    display: none

}



.product-details-info-area {

    padding-top: 50px;

    padding-bottom: 50px

}



.product-details-info-area h3 {

    margin-bottom: 8px;

    font-size: 30px;

    font-weight: 700

}



.product-details-info-area .price {

    color: var(--mainColor)

}



.product-details-info-area .stars {

    margin-bottom: 15px

}



.product-details-info-area .default-button {

    margin-top: 30px

}



.product-details-info-area .product-details-social-icons ul {

    border-top: 1px solid #eee;

    margin: 30px 0 0;

    padding: 30px 0 0;

    list-style: none

}



.product-details-info-area .product-details-social-icons ul li {

    display: inline-block

}



.product-details-info-area .product-details-social-icons ul li span {

    margin-right: 20px;

    font-family: var(--fontFamily);

    font-size: var(--fontSize);

    font-weight: 600

}



.product-details-info-area .product-details-social-icons ul li a {

    width: 40px;

    height: 40px;

    margin: 0 5px;

    border: 1px solid #eee;

    border-radius: 50%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: var(--mainColor);

    background-color: #f9f9f9

}



.product-details-info-area .product-details-social-icons ul li a:hover {

    color: var(--whiteColor);

    border-color: var(--mainColor);

    background-color: var(--mainColor)

}



.product-description-area .nav-tabs {

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border-bottom: transparent

}



.product-description-area .nav-tabs .nav-link {

    margin-right: 15px;

    padding: 12px 25px;

    margin-top: 10px;

    border: 0;

    border-radius: 5px;

    color: var(--mainColor);

    border: 1px solid var(--mainColorShadow);

    font-size: 18px;

    font-weight: 500;

    font-family: var(--fontFamily)

}



.product-description-area .nav-tabs .active {

    color: var(--whiteColor);

    background-color: var(--mainColor)

}



.product-description-area .tab-content {

    margin-top: 30px;

    padding: 30px;

    background-color: var(--whiteColor)

}



.product-description-area .tab-content .bd-comments,

.product-description-area .tab-content .bd-form {

    padding: 0;

    background-color: transparent;

    border: 0

}



.product-description-area .tab-content .bd-comments {

    margin-top: 0 !important

}



.product-description-area .pd-features-area {

    max-width: 720px

}



.product-description-area .pd-description .production-description-list {

    margin: 0;

    padding: 0;

    list-style: none

}



.product-description-area .pd-description .production-description-list li {

    margin-top: 10px;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.product-description-area .pd-description .production-description-list li i {

    color: var(--mainColor);

    margin-right: 5px;

    position: relative;

    top: 3px

}



.review-stars {

    margin-top: -20px;

    margin-bottom: 10px

}



.review-stars input {

    position: absolute;

    clip: rect(0, 0, 0, 0)

}



.review-stars label {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    display: inline-block;

    margin-right: 5px;

    height: 25px;

    width: 25px;

    background: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBmaWxsPSd0cmFuc3BhcmVudCcgc3Ryb2tlPSdyZ2JhKDI1NSwgMjE3LCAwLCAwLjk3MyknIHN0cm9rZS13aWR0aD0nMzgnIGQ9J00yNTkuMjE2IDI5Ljk0MkwzMzAuMjcgMTczLjkybDE1OC44OSAyMy4wODdMMzc0LjE4NSAzMDkuMDhsMjcuMTQ1IDE1OC4yMy0xNDIuMTE0LTc0LjY5OC0xNDIuMTEyIDc0LjY5OCAyNy4xNDYtMTU4LjIzTDI5LjI3NCAxOTcuMDA3bDE1OC44OS0yMy4wODh6JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4=);

    font-size: 0;

    cursor: pointer

}



.review-stars input:nth-child(1):checked~label:nth-of-type(-n+1),

.review-stars input:nth-child(2):checked~label:nth-of-type(-n+2),

.review-stars input:nth-child(3):checked~label:nth-of-type(-n+3),

.review-stars input:nth-child(4):checked~label:nth-of-type(-n+4),

.review-stars input:nth-child(5):checked~label:nth-of-type(-n+5) {

    background: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBmaWxsPSdyZ2JhKDI1NSwgMjE3LCAwLCAwLjk3MyknIHN0cm9rZT0ncmdiYSgyNTUsIDIxNywgMCwgMC45NzMpJyBzdHJva2Utd2lkdGg9JzM4JyBkPSdNMjU5LjIxNiAyOS45NDJMMzMwLjI3IDE3My45MmwxNTguODkgMjMuMDg3TDM3NC4xODUgMzA5LjA4bDI3LjE0NSAxNTguMjMtMTQyLjExNC03NC42OTgtMTQyLjExMiA3NC42OTggMjcuMTQ2LTE1OC4yM0wyOS4yNzQgMTk3LjAwN2wxNTguODktMjMuMDg4eicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PC9zdmc+)

}



.cart-table-area thead th {

    border-bottom: 0 !important;

    color: var(--blackColor);

    padding-top: 15px !important;

    padding-bottom: 15px !important;

    font-size: 18px;

    font-weight: 600;

    font-family: var(--fontFamily)

}



.cart-table-area .table-light {

    border-bottom: 0 !important

}



.cart-table-area tbody {

    border-top: 0 !important

}



.cart-table-area tbody tr {

    padding: 15px 0

}



.cart-table-area tbody th {

    padding: 20px 0

}



.cart-table-area tr {

    text-align: center;

    color: var(--paragraphColor);

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.cart-table-area .fa-trash-alt {

    color: red

}



.cart-table-area .stockout {

    color: red

}



.cart-table-area .instock {

    color: green

}



.cart-footer-area {

    margin-top: 15px

}



.cart-footer-area .input-group {

    max-width: 500px;

    overflow: hidden;

    margin-top: 10px;

    border-radius: 10px !important;

    background-color: #f9f9f9

}



.cart-footer-area .input-group .form-control {

    background-color: #f9f9f9;

    border-radius: 10px !important;

    border: 0 !important;

    padding: 12px 15px

}



.cart-footer-area .input-group .default-button {

    padding: 12px 15px;

    border: 0;

    margin: 10px;

    border-radius: 10px !important

}



.cart-footer-area .dfb {

    margin-left: auto;

    margin-top: 10px;

    display: block;

    float: right

}



.input-counter {

    max-width: 130px;

    min-width: 130px;

    text-align: center;

    display: inline-block;

    position: relative

}



.input-counter span {

    position: absolute;

    top: 0;

    background-color: transparent;

    cursor: pointer;

    color: var(--paragraphColor);

    width: 50px;

    height: 100%;

    line-height: 45px;

    -webkit-transition: .5s;

    transition: .5s

}



.input-counter span:hover {

    color: var(--mainColor)

}



.input-counter .minus-btn {

    left: 0

}



.input-counter .plus-btn {

    right: 0

}



.input-counter input {

    height: 45px;

    color: var(--paragraphColor);

    outline: 0;

    display: block;

    border: none;

    border: 1px solid #eee;

    text-align: center;

    width: 100%;

    font-size: 18px;

    font-weight: 500;

    border-radius: 5px

}



.input-counter input::-webkit-input-placeholder {

    color: var(--paragraphColor);

    -webkit-transition: .6s;

    transition: .6s

}



.input-counter input:-ms-input-placeholder {

    color: var(--paragraphColor);

    -webkit-transition: .6s;

    transition: .6s

}



.input-counter input::-ms-input-placeholder {

    color: var(--paragraphColor);

    -webkit-transition: .6s;

    transition: .6s

}



.input-counter input::placeholder {

    color: var(--paragraphColor);

    -webkit-transition: .6s;

    transition: .6s

}



.input-counter input:focus::-webkit-input-placeholder {

    color: var(--mainColor)

}



.input-counter input:focus:-ms-input-placeholder {

    color: var(--mainColor)

}



.input-counter input:focus::-ms-input-placeholder {

    color: var(--mainColor)

}



.input-counter input:focus::placeholder {

    color: var(--mainColor)

}



.total-cart-box {

    padding: 30px;

    -webkit-box-shadow: var(--boxShadow);

    box-shadow: var(--boxShadow);

    background-color: var(--whiteColor)

}



.total-cart-box h4 {

    margin-bottom: 20px;

    font-size: var(--card-title-fontSize);

    font-weight: 600

}



.total-cart-box ul {

    margin: 0;

    padding: 0;

    list-style: none

}



.total-cart-box ul li {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    padding: 15px;

    border: 1px solid #eee

}



.total-cart-box ul li span {

    color: var(--paragraphColor);

    font-size: var(--fontSize);

    font-family: var(--fontFamily)

}



.total-cart-box ul li span strong {

    color: var(--blackColor)

}



.total-cart-box .default-button {

    margin-top: 30px

}



.checkout-user {

    color: var(--blackColor);

    font-size: var(--fontSize);

    margin-bottom: 30px;

    padding: 15px 25px;

    background-color: #f9f9f9

}



.checkout-user span {

    color: var(--paragraphColor);

    font-size: var(--fontSize)

}



.checkout-user span a {

    color: var(--mainColor)

}



.checkout-user span a:hover {

    color: var(--blackColor)

}



.billing-details {

    margin-bottom: 30px

}



.billing-details h3 {

    font-size: var(--card-title-fontSize);

    color: var(--blackColor);

    margin-bottom: 25px;

    font-weight: 600

}



.billing-details .form-group {

    margin-bottom: 25px

}



.billing-details .form-group label {

    color: var(--blackColor);

    display: block;

    margin-bottom: 10px;

    font-weight: 500;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.billing-details .form-group label span {

    color: var(--mainColor)

}



.billing-details .form-group .form-control {

    height: 50px;

    color: var(--paragraphColor);

    border: none;

    background-color: #f9f8f8;

    border-radius: 0;

    padding: 10px 20px;

    width: 100%

}



.billing-details .form-group .form-control:focus {

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none

}



.billing-details .form-group .form-control:hover {

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none

}



.billing-details .form-group .form-message {

    font-size: 16px;

    border: none;

    background-color: #f9f8f8;

    padding: 18px;

    font-weight: 400;

    width: 100%

}



.billing-details .form-group .form-message:focus {

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none

}



.billing-details .form-group .form-message:hover {

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none

}



.billing-details .form-check {

    margin-bottom: 15px;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.billing-details .form-check .form-check-input {

    width: 15px;

    height: 15px

}



.billing-details .form-check .form-check-label {

    color: var(--blackColor);

    margin-left: 3px;

    font-weight: 500

}



.billing-totals {

    margin-bottom: 30px

}



.billing-totals h3 {

    font-size: var(--card-title-fontSize);

    font-weight: 600;

    margin-bottom: 15px

}



.billing-totals ul {

    padding: 0;

    margin: 0;

    list-style-type: none;

    border: 1px solid #eee;

    position: relative

}



.billing-totals ul li {

    padding: 15px;

    color: var(--paragraphColor);

    overflow: hidden;

    font-weight: 500;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    border-bottom: 1px solid #eee;

    font-weight: 400;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.billing-totals ul li strong {

    color: var(--blackColor)

}



.billing-totals ul li:first-child {

    border-bottom: 1px solid #eee;

    padding: 15px

}



.billing-totals ul li:nth-child(2) {

    padding-top: 15px

}



.billing-totals ul li:last-child {

    padding-bottom: 15px

}



.payment-box {

    background-color: var(--whiteColor);

    -webkit-box-shadow: 0 5px 28px rgba(0, 0, 0, .07);

    box-shadow: 0 5px 28px rgba(0, 0, 0, .07);

    margin-top: 30px;

    margin-bottom: 30px;

    padding: 40px 30px

}



.payment-box .payment-method h3 {

    font-size: var(--card-title-fontSize);

    font-weight: 600;

    margin-bottom: 20px

}



.payment-box .payment-method p [type=radio]:checked {

    display: none

}



.payment-box .payment-method p [type=radio]:checked+label {

    padding-left: 27px;

    cursor: pointer;

    display: block;

    font-weight: 600;

    color: var(--blackColor);

    position: relative;

    margin-bottom: 15px

}



.payment-box .payment-method p [type=radio]:checked+label::before {

    content: '';

    position: absolute;

    left: 0;

    top: 3px;

    width: 18px;

    height: 18px;

    border: 1px solid #ddd;

    border-radius: 50%;

    background: #fff

}



.payment-box .payment-method p [type=radio]:checked+label::after {

    content: '';

    width: 12px;

    height: 12px;

    background: var(--mainColor);

    position: absolute;

    top: 6px;

    left: 3px;

    border-radius: 50%;

    -webkit-transition: .5s;

    transition: .5s;

    opacity: 1;

    visibility: visible;

    -webkit-transform: scale(1);

    transform: scale(1)

}



.payment-box .payment-method p [type=radio]:not(:checked) {

    display: none

}



.payment-box .payment-method p [type=radio]:not(:checked)+label {

    padding-left: 27px;

    cursor: pointer;

    display: block;

    font-weight: 600;

    color: #172541;

    position: relative;

    margin-bottom: 15px

}



.payment-box .payment-method p [type=radio]:not(:checked)+label::before {

    content: '';

    position: absolute;

    left: 0;

    top: 3px;

    width: 18px;

    height: 18px;

    border: 1px solid #ddd;

    border-radius: 50%;

    background: #fff

}



.payment-box .payment-method p [type=radio]:not(:checked)+label::after {

    content: '';

    width: 12px;

    height: 12px;

    background: var(--mainColor);

    position: absolute;

    top: 6px;

    left: 3px;

    border-radius: 50%;

    -webkit-transition: .5s;

    transition: .5s;

    opacity: 0;

    visibility: hidden;

    -webkit-transform: scale(0);

    transform: scale(0)

}



.payment-box .default-btn {

    margin-top: 20px;

    text-align: center;

    width: 100%

}



.contact-form-text-area form .form-control {

    padding: 15px;

    border: 1px solid #eee !important;

    margin: 0 0 20px;

    background-color: #f9f9f9

}



.contact-form-text-area form .default-button {

    border: 0;

    margin-top: 10px;

    width: 100%

}



.with-errors ul li {

    color: red

}



.text-danger {

    margin-top: 10px

}



.customer-support-area {

    background-color: #f9f9f9;

    padding: 50px

}



.customer-support-area h4 {

    margin-bottom: 5px;

    font-size: var(--card-title-fontSize);

    font-weight: 700

}



.customer-support-area .contact-list {

    margin: 0 0 25px;

    padding: 0;

    list-style: none

}



.customer-support-area .contact-list li {

    margin-top: 15px;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.customer-support-area .contact-list li i {

    font-size: 20px;

    color: var(--mainColor);

    margin-right: 10px;

    position: relative;

    top: 4px

}



.customer-support-area .working-time {

    margin: 0;

    padding: 0;

    list-style: none

}



.customer-support-area .working-time li {

    margin-top: 15px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    color: var(--paragraphColor);

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    font-size: var(--fontSize);

    font-family: var(--fontFamily2)

}



.contact-google-map {

    width: 100%;

    height: 400px

}



.contact-google-map .g-map {

    width: 100%;

    height: 100%

}



@-webkit-keyframes left-right {

    100% {

        left: 100%

    }

}



@keyframes left-right {

    100% {

        left: 100%

    }

}



@-webkit-keyframes breathe {

    50% {

        width: 150%;

        height: 150%

    }

}



@keyframes breathe {

    50% {

        width: 150%;

        height: 150%

    }

}



@keyframes top-bottom {

    50% {

        -webkit-transform: translateY(-15px);

        transform: translateY(-15px)

    }

}



.footer-logo-area h3 {

	color: var(--whiteColor);

	margin-bottom: 20px;

	display: inline-block;

	font-size: var(--card-title-fontSize);

	font-weight: 600;

	position: relative;

}

.wpcf7-not-valid-tip {
    margin: -10px 0 10px;
}
li.current_page_item a {
	color: #31e231 !important;
}
.navbar-nav li a {
    text-transform: uppercase;
}

.sign-up .wpcf7-not-valid-tip{
    margin: 10px 0 -6px 0;
    color: #fff !important;
}

.service-details .details-page-text-img-area img {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

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

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

.about-img-2 img {
	height: 550px;
	width: 100%;
}
.service-card-img a img {
	width: 100%;
	height: 300px;
}

.product-card {
	border: 1px solid #000;
	padding: 10px;
}
.product-card-img img {
	height: 250px;
	width: 100%;
	object-fit: cover;
}

.popmake-overlay input, .popmake-overlay textarea {
	border: 1px solid #000 !important;
	margin: 10px 0;
}
.logo img {
	height: auto !important;
	width: 150px;
}
.about-text-area ul, .details-page-text-area ul, .modal-body ul {
	padding: 0 !important;
}
.about-text-area ul li, .details-page-text-area ul li, .modal-body ul li {
	list-style: none !important;
	padding: 0 !important;
	line-height: 35px !important;
    font-size: 18px;
}
.about-text-area ul li::before, .details-page-text-area ul li::before, .modal-body ul li::before {
	content: '✓';
	color: #0d00ff;
	font-size: 20px;
	font-weight: 700;
	padding: 0 10px 0 0;
}
.socialIcon {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
    margin-top: 20px !important;
}
.socialIcon li:not(:first-child) {
	margin: 0 15px;
}
.socialIcon li:first-child {
	margin: 0 15px 0 0;
}
.socialIcon li i {
	font-size: 20px;
	color: #0d00ff;
}
.socialIcon li i:hover {
	color: #000;
}
@media only screen and (max-width: 991px) {
.mobile-nav .logo {
    top: 0px;
}
.logo a img {
	height: 80px !important;
	width: 100%;
}
}
.home .wpcf7-response-output {
	color: #fff;
}
.service-card-text-area button {
	background-color: #0d00ff !important;
	color: #fff !important;
	text-transform: uppercase !important;
	padding: 7px 10px 10px 10px;
	border: 1px solid #0d00ff !important;
}
.service-card-text-area button:hover
{
    color: #0d00ff !important;
    background-color: #fff !important;
}
#serviceEnquiryModal .form-control {
	border: 1px solid #0d00ff !important;
	padding: 12px;
	margin: 8px 0;
}
#serviceEnquiryModal .wpcf7 form .wpcf7-response-output {
	margin: 0 !important;
}
.int_blog_pagination a, .int_blog_pagination span {
	border: 1px solid #0d00ff;
	color: #0d00ff;
	font-size: 20px;
	padding: 6px 10px;
}

.int_blog_pagination span, .int_blog_pagination a:hover
{
    background-color: #0d00ff;
    color: #fff;
}
.page-template-template-products .service-card-img img {
	width: 100%;
	height: 250px;
	object-fit: contain;
}
.page-template-template-products .productDescription {
	height: 205px;
	overflow-y: scroll;
	scrollbar-color: #130cf473 #35da34b8;
	scrollbar-width: thin;
	margin-bottom: 10px;
	padding-right: 5px;
}
.page-template-template-products .service-card {
	margin-top: 40px;
	-webkit-box-shadow: var(--boxShadow);
	box-shadow: var(--boxShadow);
	background-color: var(--whiteColor);
	height: 621px;
}
.clientLogo img {
	height: 180px;
	width: auto;
}
.clientLogo img {
	width: 100%;
	height: 150px;
}