/**
	
* Template Name: Delsa - Creative HTML Template For Startup Agency
* Version: 1.1
* Author: Unicoder
* Email: unicoder16@gmail.com
* Developed By: Unicoder
* First Release: 10th July, 2020
* Author URL: www.unicoderbd.com

**/


/**

 * CSS Table
 * Preloader CSS
 * Landing Page CSS
 * Default CSS
 * Header Style CSS
 * List Style CSS 
 * What We Do section CSS 
 * Owl Carousel CSS 
 * Table Style CSS 
 * Tab Style CSS
 * Form Style CSS 
 * Mixitup CSS 
 * Fact Counter CSS
 * latest projects CSS 
 * Subscribe CSS 
 * Footer widget CSS
 * Inner pages breadcrumb CSS
 * Single Blog CSS
 * Sidebar Widget CSS
 * Shop Page CSS
 * Single Shop Page CSS
 * Pagination Style CSS
 * Cart Page CSS 
 
**/


/*==========================================================
 Preloader CSS
 ==========================================================*/

.preloader {
    position: fixed;
    background-color: var(--theme-primary-color);
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 99992
}

.preloader div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    border: 8px solid var(--theme-white-color);
    border-radius: 50%;
    animation: preloader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--theme-white-color) transparent transparent transparent;
    top: 50%;
    left: 50%;
    margin: -32px 0 0 -32px;
}

.preloader div:nth-child(1) {
    animation-delay: -0.45s;
}

.preloader div:nth-child(2) {
    animation-delay: -0.3s;
}

.preloader div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes preloader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*==========================================================
  Landing Page CSS
 ==========================================================*/

.purchase-btn-envato {
    position: fixed;
    left: 50px;
    bottom: 50px;
    z-index: 9;
    width: 50px;
    height: 50px;
    z-index: 100;
}

.purchase-btn-envato a {
    z-index: 100;
    position: relative;
}

.follow-vertical2.left {
    left: -30px;
}

.follow-vertical2 {
    bottom: 50%;
    transform: rotate(-90deg);
    z-index: 100;
    color: var(--theme-secondary-color);
}

.follow-vertical2 a {
    padding: 0 10px;
}


/*==========================================================
 Default CSS
 ==========================================================*/

.screnshots.owl-carousel .owl-item.active,
.accorden-title::after,
.btn-link.secondary-border-bottom::after {
    -moz-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}

body {
    font-family: var(--theme-general-font);
}

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

img {
    max-width: 100%;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
}

p {
    line-height: 28px;
}

a.hover-text-primary:focus {
    color: var(--theme-primary-color) !important
}

.full-row {
    padding: 120px 0;
}

.ml-30 {
    margin-left: 30px;
}

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

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

.p-30 {
    padding: 30px;
}

.py-8,
.pt-8 {
    padding-top: 80px;
}

.py-8,
.pb-8 {
    padding-bottom: 80px !important;
}

.py-12,
.pt-12 {
    padding-top: 120px;
}

.py-12,
.pb-12 {
    padding-bottom: 120px;
}

.px-100 {
    padding-left: 100px;
    padding-right: 100px;
}

.hover-underline-none:hover {
    text-decoration: none;
}

.tagline {
    color: #444444;
}

.font-15 {
    font-size: 15px;
}

.font-16 {
    font-size: 16px !important;
}

.box-70px {
    width: 70px !important;
}

.box-80px {
    width: 80px !important;
}

.box-150px {
    width: 150px !important;
}

.font-weight-medium {
    font-weight: 500 !important;
}

.font-weight-semibold {
    font-weight: 600 !important;
}

.radius-10px {
    border-radius: 10px;
}

.btn {
    font-size: 16px;
    padding: 0 35px;
    line-height: 54px;
    font-weight: 500;
}


/* for genesis start */

.btn.send {
    padding: 0 70px;
}

.btn-small {
    line-height: 38px;
    padding: 0 20px;
    font-weight: 400;
}

.btn-secondary:hover {
    background-color: var(--theme-primary-color);
    color: var(--theme-white-color);
    filter: brightness(100%);
}

.btn-primary-border {
    border: 1px solid var(--theme-primary-color);
    background-color: transparent;
    color: var(--theme-primary-color)
}

.btn-primary-border:hover {
    background-color: var(--theme-primary-color);
    color: var(--theme-white-color)
}

.btn-secondary-border {
    border: 1px solid var(--theme-secondary-color);
    background-color: transparent;
    color: var(--theme-secondary-color)
}

.btn-secondary-border:hover {
    background-color: var(--theme-secondary-color);
    color: var(--theme-white-color)
}

.btn-extra1 {
    background-color: var(--theme-extra1-color);
    color: var(--theme-white-color);
    border: 1px solid var(--theme-extra1-color);
}

.btn-extra1:hover {
    color: var(--theme-white-color);
    background-color: var(--theme-extra1-color);
    filter: brightness(125%);
}

.btn-extra2-border {
    border: 1px solid var(--theme-extra2-color);
    background-color: transparent;
    color: var(--theme-extra2-color)
}

.btn-extra2-border:hover {
    background-color: var(--theme-extra2-color);
    color: var(--theme-white-color)
}

.btn-extra4-border {
    border: 1px solid var(--theme-extra4-color);
    color: var(--theme-dark-color);
}

.hover-btn-primary:hover {
    border: 1px solid var(--theme-primary-color);
    background-color: var(--theme-primary-color);
    color: var(--theme-white-color);
}

.border-secondary {
    border-color: var(--theme-secondary-color) !important
}

.btn-link {
    font-weight: 400;
    font-size: 16px;
}

.btn-link.secondary-border-bottom {
    position: relative;
    overflow: hidden;
}

.btn-link.secondary-border-bottom::after {
    position: absolute;
    top: 100%;
    right: 100%;
    width: 0;
    height: 2px;
    background-color: var(--theme-secondary-color);
    content: "";
}

.btn-link.secondary-border-bottom:hover::after {
    right: 0;
    width: 100%;
}

.z-index-9 {
    z-index: 9;
}

.list-group-item {
    background-color: transparent !important;
}

.list-group-item.active {
    background-color: var(--theme-primary-color) !important;
    border-color: var(--theme-primary-color) !important;
}

.half-gray::after,
.half-extra1::after {
    position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
}

.half-extra1::after {
    background-color: var(--theme-extra1-color)
}

.half-gray::after {
    background-color: var(--theme-gray-color)
}

.shape-3 {
    background: url(../images/shape/3.png) no-repeat left/contain;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -50px;
    top: 50px;
    content: "";
}

.shadow-2 {
    box-shadow: 24px 0 131px rgba(109, 109, 109, .15) !important;
}

.shadow-3 {
    box-shadow: 17px 0 38px rgba(109, 109, 109, .25) !important;
}

.shadow-4 {
    box-shadow: 15px 0 40px rgba(109, 109, 109, .06) !important;
}

.shadow-5 {
    box-shadow: 0 11px 40px rgba(0, 0, 0, .16) !important;
}

.shadow-6 {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.shadow-7 {
    box-shadow: 0px 0 53px rgba(0, 0, 0, 0.05) !important;
}

.hover-shadow-2:hover {
    box-shadow: 0px 40px 80px rgba(109, 109, 109, .3) !important;
}

.hover-change:hover .change-text-white,
.hover-change:hover .change-text-white li::before {
    color: var(--theme-white-color) !important;
}

.hover-change:hover .change-text-primary {
    color: var(--theme-primary-color) !important;
}

.hover-change:hover .change-text-secondary {
    color: var(--theme-secondary-color) !important;
}

.hover-change:hover .change-bg-white {
    background-color: var(--theme-white-color) !important;
}

.hover-change:hover .change-btn-white {
    background-color: var(--theme-white-color);
    color: var(--theme-primary-color);
}

.hover-change:hover .change-btn-primary {
    background-color: var(--theme-primary-color) !important;
    color: var(--theme-white-color) !important;
}

.list-mt-15 li+li {
    margin-top: 15px;
}

.gradient-1 {
    background: #704ad1;
    /* Old browsers */
    background: -moz-linear-gradient(left, #704ad1 0%, #7561fc 99%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #704ad1 0%, #7561fc 99%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #704ad1 0%, #7561fc 99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#704ad1', endColorstr='#7561fc', GradientType=1);
    /* IE6-9 */
}

.border-bottom-white {
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.fixed-top .border-bottom-white {
    border: none !important;
    margin-bottom: 0 !important;
}

.radius-60 {
    border-radius: 60px;
}

.w-140 {
    width: 140px;
}

.height-50 {
    height: 50px;
}

.border-extra3 {
    border: 1px solid var(--theme-extra3-color);
}

.hover-text-secondary2:hover {
    color: var(--theme-secondary2-color) !important
}

.border-dark {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.pricing-title {
    font-family: var(--theme-extra1-font);
    color: var(--theme-extra5-color);
    font-weight: 600;
}

.pricing-amount {
    font-size: 72px !important;
}

.hover-zoomer {
    /*For genesis*/
    width: 95%;
    overflow: hidden;
	position: relative;
	padding: 45px 30px;
}

.hover-zoomer.rounded,
.hover-zoomer.rounded {
    border-radius: 40px !important;
    border: 1px solid #9E9E9E;
}

.hover-zoomer:hover {
    -webkit-box-shadow: 22px 20px 90px 20px rgba(125, 125, 125, .35);
    box-shadow: 22px 20px 90px 20px rgba(125, 125, 125, .35);
    border: 1px solid transparent;
}

.hover-zoomer.middle {
    padding: 90px 50px !important;
}


.hover-zoomer .shape {
    display: none;
}

.list-general li {
    color: var(--theme-general-color);
    font-size: 16px;
    font-weight: 400;
}


/* pricing for genesis */

.pricing-simple .price {
    position: relative
}

.pricing-simple:hover .price::before,
.img-shasow-1::before {
    width: 300px;
    height: 300px;
    position: absolute;
    content: "";
    background: url(../images/shadow/1.png) no-repeat;
    top: -115px;
    left: -95px;
}

.pricing-simple.hover-zoomer:hover {
    padding: 30px 30px 100px !important;
    margin-top: -20px;
}

.pricing-simple:hover .btn-primary-border {
    background-color: var(--theme-primary-color) !important;
    color: var(--theme-white-color) !important
}


/* For Testimonial */

.testimonial .designation {
    color: var(--theme-extra3-color)
}

.testimonial-carousel .owl-item .author-image img {
    opacity: .4;
}

.testimonial-carousel .owl-item.center .author-image img {
    opacity: 1;
}

.owl-carousel.testimonial-carousel .owl-dots {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -50px;
    width: 40px;
    margin-top: 0;
    justify-content: center
}

.owl-carousel.testimonial-carousel .owl-dots .owl-dot {
    width: 13px;
    height: 13px;
    border: 1px solid var(--theme-primary-color);
    background: transparent;
    margin: 0 auto;
}

.owl-carousel.testimonial-carousel .owl-dots .owl-dot+.owl-dot {
    margin-top: 30px;
}

.owl-carousel.testimonial-carousel .owl-dots .owl-dot.active {
    width: 20px;
    height: 20px;
    background: var(--theme-primary-color);
    border-radius: 50%;
    position: relative;
}

.owl-carousel.testimonial-carousel .owl-dots .owl-dot.active::before {
    width: 36px;
    height: 36px;
    background-color: rgba(38, 225, 175, .3);
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%
}

.follow-vertical a {
    position: relative;
}

.follow-vertical a+a::after {
    position: absolute;
    content: ".";
    top: -5px;
    left: -5px;
    font-size: 18px;
    font-weight: 700;
}

.follow-vertical.left.arrow {
    left: -30px;
}

.follow-vertical.left.arrow::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent var(--theme-primary-color);
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    content: "";
    transform: translateY(-50%);
}

.follow-vertical.left.arrow::after {
    position: absolute;
    content: "";
    width: 200px;
    height: 2px;
    background-color: var(--theme-primary-color);
    top: 50%;
    right: calc(100% + 20px);
    transform: translateY(-50%);
}

#lottie {
    width: 160%;
    background: url(../images/shape/1.png) no-repeat center/ 50%;
    position: relative;
    left: -100px
}

#lottie2 {
    width: 110%;
}

#lottie3 {
    width: 190%;
    left: -200px;
    position: relative;
    bottom: -132px;
}

.dot-counter .doted {
    width: 5px;
    height: 5px;
    content: "";
    background-color: var(--theme-primary-color);
    display: inline-block;
    margin-left: 3px;
}


/*============ 
 Header Style CSS
===============*/

.secondary-nav-leftside .push-nav-toggle {
    left: 140px;
}

.navbar-expand-lg .navbar-nav .nav-link {
    font-size: 16px;
    font-weight: 400;
}

.planing-title {
    font-size: 80px;
    line-height: 84px;
}


/* for index genesis  */

.navbar-brand.shape {
    position: relative;
}

.navbar-brand.shape::before {
    position: absolute;
    content: "";
    width: 300px;
    height: 300px;
    border-radius: 50px;
    left: -90px;
    top: -255px;
    transform: rotate(45deg);
    background-color: var(--theme-primary-color);
}

.navbar-brand.shape img {
    position: relative;
    z-index: 99
}


/*============ 
 List Style CSS 
===============*/

.list-half-width li {
    padding: 0 0 0 20px;
}

.list-style-img li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
    color: var(--theme-secondary-color);
}

.list-style-img li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    background: url(../images/icon/1.png);
}

.list-style-tick li {
    margin-bottom: 15px;
    font-weight: 300;
    line-height: 28px;
}

.list-text-extra2 {
    color: var(--theme-extra2-color);
}

.list-style-tick li::before {
    font-size: 12px;
}

.list-style-tick li.disable {
    color: var(--theme-general-color);
}

.list-style-tick li.disable::before {
    content: "\f00d";
    color: var(--theme-general-color)
}

.list-style-tick.tick-right li {
    padding-left: 0;
    padding-right: 20px;
}

.list-style-tick.tick-right li::before {
    left: auto;
    right: 0;
}

.tick-primary li:before {
    color: var(--theme-primary-color)
}

.tick-secondary li:before {
    color: var(--theme-secondary-color)
}

.tick-general li:before {
    color: var(--theme-general-color)
}

.tick-extra2 li:before {
    color: var(--theme-extra2-color)
}

.list-style-box li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 20px;
    color: var(--theme-secondary-color);
}

.list-style-box li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--theme-primary-color);
    border-radius: 50%;
    transform: translateY(-50%);
}

.list-dark li {
    color: var(--theme-dark-color);
    margin-bottom: 30px;
}

.list-dark li:last-child {
    margin-bottom: 0
}


/*============ 
 What We Do section CSS 
===============*/

.what-do-title {
    width: 360px;
}


/*============ 
 Owl Carousel CSS 
===============*/

.owl-nav {
    margin-top: 30px;
}

.owl-nav2 .owl-nav {
    margin-top: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    margin-top: 0;
    width: 100%;
}

.owl-nav2.owl-carousel .owl-nav button {
    background-color: var(--theme-white-color);
    color: var(--theme-secondary-color);
    border-color: var(--theme-white-color) !important;
    border-radius: 50%;
}

.owl-nav2.owl-carousel .owl-nav button:hover {
    border-color: var(--theme-primary-color) !important;
}

.owl-nav2 .owl-nav button:first-child {
    float: left;
}

.owl-nav2 .owl-nav button:last-child {
    float: right
}

.owl-nav2 .owl-nav button:first-child::before {
    content: "\f30a";
}

.owl-nav2 .owl-nav button:last-child::before {
    content: "\f30b";
}

.owl-nav button {
    width: 45px;
    height: 45px;
    position: relative;
    border: 1px solid var(--theme-general-color) !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.owl-nav button:hover {
    border-color: var(--theme-primary-color) !important;
    background-color: var(--theme-primary-color) !important;
    color: var(--theme-white-color) !important;
}

.owl-nav button span {
    display: none;
}

.owl-nav button::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.owl-nav button:first-child::before {
    content: "\f060";
}

.owl-nav button:last-child::before {
    content: "\f061";
}

.icon-2 .owl-nav button:first-child::before {
    content: "\f30a";
}

.icon-2 .owl-nav button:last-child::before {
    content: "\f30b";
}

.screnshots.owl-carousel .owl-stage {
    padding: 60px 0;
}

.screnshots.owl-carousel .owl-item.active {
    transform: scale(1);
}

.screnshots.owl-carousel .owl-item.active.center {
    transform: scale(1.2);
    position: relative;
    z-index: 9;
}

.screnshots.owl-carousel .owl-dots.disabled {
    display: block;
    text-align: center;
}

.partner-slider .item img {
    width: auto;
    margin: 0 auto;
}


/*============ 
 Table Style CSS 
===============*/

.table-bordered td,
.table-bordered th {
    border: 1px solid var(--theme-extra3-color)
}

table.cart img {
    background-color: transparent;
    border: 1px solid var(--theme-gray-color);
}

table.cart tr th+th,
table.cart tr td+td {
    border-left: 1px solid rgba(0, 0, 0, .1);
    ;
}

table.cart th {
    background-color: transparent;
}


/*============ 
 Tab Style CSS 
===============*/

.nav-tabs .nav-link {
    border: 1px solid var(--theme-extra4-color);
    border-radius: 0;
    background-color: var(--theme-gray-color);
    color: var(--theme-extra1-color)
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--theme-white-color);
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}

.woocommerce-tabs .tab-content {
    border: 1px solid;
    border-color: transparent;
    padding: 0;
    margin-top: 30px;
}


/*============ 
 Form Style CSS 
===============*/

.text-extra4::placeholder {
    color: var(--theme-extra4-color)
}

input[type="number"] {
    -moz-appearance: textfield;
}

.quantity.type-2,
.product-quantity .quantity {
    display: table;
    position: relative;
    margin: 0 auto;
}

.quantity.type-2 {
    margin: 0;
    border: 1px solid var(--theme-extra4-color);
    height: 46px;
    border-radius: 5px;
}

.quantity.type-2 input,
.product-quantity input {
    width: 40px;
    background-color: var(--theme-gray-color);
    border: none;
    display: table;
    text-align: center;
    margin: 0 35px;
    height: 30px;
}

.quantity.type-2 input {
    background-color: transparent;
    border-left: 1px solid var(--theme-extra4-color);
    border-right: 1px solid var(--theme-extra4-color);
    width: 50px;
    height: 46px;
    margin: 0 46px;
}

.quantity.type-2 .quantity-nav,
.product-quantity .quantity-nav {
    position: absolute;
    top: 2px;
    width: 100%;
}

.quantity.type-2 .quantity-up,
.product-quantity .quantity-up {
    float: right;
    background-color: var(--theme-gray-color);
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-right: 4px;
    cursor: pointer;
}

.quantity.type-2 .quantity-down,
.product-quantity .quantity-down {
    float: left;
    background-color: var(--theme-gray-color);
    font-size: 30px;
    height: 30px;
    line-height: 30px;
    width: 30px;
    cursor: pointer;
}

.quantity.type-2 .quantity-up,
.quantity.type-2 .quantity-down {
    background-color: transparent;
    color: var(--theme-primary-color);
    line-height: 46px;
    width: 46px;
}

.cart_totals table tr:first-child td,
.cart_totals table tr:first-child th {
    border-top: none
}

.stock.in-stock {
    background-color: transparent;
    color: var(--theme-general-color);
    font-size: 15px;
    font-weight: 300;
    padding: 0;
}

.subscribe-form button {
    height: 50px;
}


/*==================
 Mixitup CSS 
===================*/

.mix-tab ul li {
    font-weight: 400;
    padding: 0;
    margin: 0 15px;
}

.mix-tab li:hover,
li.mixitup-control-active {
    color: var(--theme-secondary-color);
    border-bottom: 1px solid;
}

.mix-tab .list-color-dark li:hover,
.list-color-dark li.mixitup-control-active {
    color: var(--theme-primary-color);
    border-bottom: none;
}


/*=========================
 Fact Counter CSS 
==========================*/

.fact-counter.border-left-dark .col+.col .count {
    border-left: 1px solid rgba(0, 0, 0, .10);
}


/* For index genesis */

.fact-counter.roller {
    padding: 140px 0;
    border: 2px solid var(--theme-primary-color);
    border-radius: 30px;
}

.fact-counter.roller .col+.col::before,
.fact-counter.roller .col+.col::after {
    position: absolute;
    background-color: var(--theme-primary-color);
    content: "";
    top: 50%;
    transform: translateY(-50%);
}

.fact-counter.roller .col+.col::before {
    width: 2px;
    height: 100px;
    left: -.5px;
}

.fact-counter.roller .col+.col::after {
    width: 7px;
    height: 55px;
    left: -3px;
    border-radius: 3px;
}


/*===========================
 latest projects CSS 
============================*/

.bolg-item .img-area,
.project-item .img-area {
    border-radius: 10px;
}

.social-on-slider-left {
    transform: rotate(-90deg);
}


/*============ 
 Subscribe CSS 
===============*/

.clipart-3 {
    background: url(../images/clipart/3.png) no-repeat 100% /contain;
    height: 100%;
    width: 100%;
    left: -100px;
    bottom: -40px;
}

.subscribe-form {
    z-index: 99;
}

.subscribe-form input {
    padding-right: 144px;
    color: var(--theme-extra2-color)
}


/*======================== 
 Footer widget CSS 
=========================*/

.footer-widget .widget-title {
    font-size: 24px;
    font-weight: 500;
}

.contact-widget ul li {
    margin-bottom: 20px;
}

footer.text-white .footer-nav ul li a {
    color: var(--theme-white-color)
}

footer.text-white .footer-nav ul li a:hover {
    color: var(--theme-primary-color)
}

[class*="media-widget-round"] a {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    display: block;
    float: left;
    margin-right: 5px;
    border-radius: 50%;
}

[class*="media-widget-round-white"] a {
    background-color: var(--theme-white-color);
    color: var(--theme-general-color);
}

[class*="media-widget-round-extra1"] a {
    background-color: var(--theme-extra1-color);
    color: var(--theme-general-color);
}

[class*="media-widget-round-secondary"] a {
    background-color: var(--theme-secondary-color);
    color: var(--theme-white-color);
}

.media-widget-round-primary a,
[class*="media-widget-round-secondary-primary"] a:hover,
[class*="media-widget-round-extra1-primary"] a:hover,
[class*="media-widget-round-white-primary"] a:hover {
    background-color: var(--theme-primary-color);
    color: var(--theme-white-color);
}

.media-widget-round-white-primary-shadow a {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.06);
}

footer.text-extra3 li a {
    color: var(--theme-extra3-color)
}

a#scroll.bg-primary:hover,
a#scroll.bg-primary:focus {
    background-color: var(--theme-primary-color) !important;
}


/*=================================
 Inner pages breadcrumb CSS 
=================================*/

.breadcrumb-item,
.breadcrumb-item>a,
.breadcrumb-item.active {
    color: var(--theme-extra1-color);
}

.simple-video-play a {
    background-color: var(--theme-extra2-color);
}

.simple-video-play a:hover {
    text-decoration: none;
}


/*=======================
 Single Blog CSS 
========================*/

.single-tag ul li {
    float: left;
    margin-right: 5px;
}

.single-tag ul li a {
    color: var(--theme-general-color)
}

.single-tag ul li a:hover {
    color: var(--theme-primary-color)
}


/*===========================
 Sidebar Widget CSS 
============================*/

.search-widget-2 {
    position: relative;
}

.search-widget-2 input {
    height: 50px;
    padding-right: 60px;
    background-color: var(--theme-gray-color);
    line-height: 40px !important;
    border-radius: 7px;
    color: var(--theme-dark-color)
}

.search-widget-2 button,
.search-widget-2 button:active,
.search-widget-2 button:focus {
    border: none;
    background-color: var(--theme-primary-color);
    color: var(--theme-white-color);
    position: absolute;
    top: 0;
    right: 0;
    line-height: 50px;
    padding: 0 20px;
    border-radius: 0 7px 7px 0;
}

.widget_recent_post li {
    margin-bottom: 20px;
}

.widget_recent_post li img {
    border-radius: 10px;
}

.widget_recent_post li+li {
    border-top: 1px solid var(--theme-extra3-color);
    padding-top: 20px;
}

.widget_categories li {
    border-bottom: 1px solid var(--theme-extra3-color);
}


/*==================
  Shop Page CSS 
====================*/

.cart-view a.top-quantity span {
    padding: 0 5px;
    line-height: 16px;
    top: -3px;
    left: 10px;
}

.woocommerce-ordering select {
    background-color: transparent;
    border: 1px solid var(--theme-extra4-color)
}

.border-extra4 {
    border: 1px solid var(--theme-extra4-color) !important
}

.product-detail {
    text-align: center;
    padding: 30px !important;
}

.product-detail .woocommerce-loop-product__title {
    font-size: 24px;
    color: var(--theme-dark-color)
}

.add_to_cart_button_2 {
    margin: 0 auto;
    display: table;
    width: calc(100% - 50px);
    font-weight: 400;
    text-transform: uppercase;
}

.product-detail .price .woocommerce-Price-amount {
    color: var(--theme-primary-color);
    font-family: var(--theme-extra1-font);
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
    display: block;
}

.star-rating i::before {
    font-size: 16px;
}

.product-img span {
    color: var(--theme-extra1-color);
}

.product-img span.fa-heart {
    font-size: 25px;
    opacity: 0;
    z-index: 999;
    right: -10px;
    top: -10px;
}

.type-product:hover span.fa-heart {
    opacity: 1;
}


/*=======================
 Single Shop Page CSS 
========================*/

.full-img-sweep .ls-thumbnail-wrapper {
    visibility: visible;
    background-color: var(--theme-light-color);
    margin-top: 0;
    padding: 20px 0;
}


/*=========================
 Pagination Style CSS 
=========================*/

.page-link {
    padding: 0;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50% !important;
    margin-right: 10px;
    border-color: var(--theme-extra4-color);
    color: var(--theme-general-color);
}


/*=====================
 Cart Page CSS 
=======================*/

#coupon_code {
    height: 50px;
    border-radius: 5px 0 0 5px;
    padding: 13px 10px;
}

table.cart .actions button {
    border-radius: 0 5px 5px 0;
}

table.cart .actions a.btn {
    line-height: 50px;
}

table.cart .actions button.button:disabled[disabled] {
    background-color: var(--theme-gray-color);
    color: var(--theme-general-color);
    line-height: 50px;
}

.cart_totals .order-total .woocommerce-Price-amount {
    color: var(--theme-general-color);
    font-size: 16px;
}

@media screen and (min-width: 1500px) {
    .row-mr-150 {
        margin-right: -150px;
    }
}

@media screen and (min-width: 1200px) {
    .min-xl-px-10 {
        padding: 0 100px
    }
    .min-xl-px-15 {
        padding: 0 150px
    }
}

@media screen and (min-width: 992px) {
    .creative-header.fixed-top {
        padding: 15px 0;
    }
    .main-nav.nav-agency .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .d-lg-none {
        display: none;
    }
    .py-lg-10 {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .py-lg-18 {
        padding-top: 180px;
        padding-bottom: 180px;
    }
    .hover-zoomer:hover .shape {
        position: absolute;
        left: -1px;
        bottom: -15px;
        width: calc(100% + 2px);
        height: auto;
        display: block;
    }
}

@media screen and (max-width: 1500px) {
    .follow-vertical.left.arrow {
        left: -150px;
    }
}

@media screen and (max-width: 1366px) {
    .dextop-py-1 {
        padding: 130px 0px 100px !important;
    }
    .dextop-mb-20 {
        margin-bottom: 200px !important
    }
    .dextop-mb-0 {
        margin-bottom: 0 !important
    }
    .follow-vertical.left {
        left: -100px;
    }
    .bg-img-1 {
        background-size: 35% !important;
        background-position: 10% center !important;
    }
    .bg-img-2 {
        background-size: 35% !important;
        background-position: 95% center !important;
    }
}

@media screen and (max-width: 1199px) {
    .full-row {
        padding: 100px 0
    }
    .bg-img-1 {
        background-size: 40% !important;
        background-position: 10% center !important;
    }
    .bg-img-2 {
        background-size: 40% !important;
        background-position: 95% center !important;
    }
    .planing-title {
        font-size: 48px;
        line-height: 48px;
    }
    .max-lg-mb-0 {
        margin-bottom: 0 !important;
    }
    .max-lg-pt-0 {
        padding-top: 0 !important;
    }
    #lottie3 {
        left: -150px;
        bottom: -105px;
    }
    .max-lg-pb-10 {
        padding-bottom: 100px !important
    }
    .max-lg-pb-14 {
        padding-bottom: 140px !important
    }
    .max-lg-mb-14 {
        margin-bottom: 140px !important
    }
    .hover-zoomer {
        width: 100%;
    }
}

@media screen and (max-width: 991px) {
    .what-do-title {
        width: 100%;
    }
    .max-md-pt-0 {
        padding-top: 0;
    }
    .max-md-py-15 {
        padding-top: 150px !important;
        padding-bottom: 150px !important;
    }
    .max-md-img-auto img {
        width: auto;
    }
    .half-gray::after,
    .half-extra1::after {
        display: none;
    }
    .max-md-bg-secondary {
        background-color: var(--theme-secondary-color) !important;
    }
    .fact-counter.border-left-dark .col:nth-child(3) .count {
        border-left: none;
    }
    #lottie {
        left: -100px;
        position: relative;
    }
    /* For index genesis */
    .navbar-brand.shape::before {
        display: none
    }
    .fact-counter.roller .col:nth-child(3)::before,
    .fact-counter.roller .col:nth-child(3)::after {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .fact-counter.border-left-dark .col .count {
        border-left: none !important;
    }
    .products-grid-view ul.products li {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #lottie {
        width: auto;
        left: auto
    }
    #lottie2 {
        width: 100%
    }
    .max-sm-mb-10 {
        margin-bottom: 100px !important
    }
}

@media screen and (max-width: 575px) {
    .owl-nav2 .owl-nav {
        display: none;
    }
    .follow-vertical.left {
        display: none;
    }
    /* for index genesis */
    .fact-counter.roller .col::before,
    .fact-counter.roller .col::after {
        display: none;
    }
    .fact-counter.roller .col {
        margin-top: 40px;
    }
    .genesis-slider h1 {
        font-size: 30px;
        line-height: 40px;
    }
}

.customPrimaryColor1 {
    color: #6B2D5C;
}
.customPrimaryColor2 {
    color: #F46036;
}
.customPrimaryColor3 {
    color: #CCCCCC;
}

.customPrimaryBgColor1 {
    background: #6B2D5C;
    color: #ffffff;
}
.customPrimaryBgColor2 {
    background: #F46036;
    color: #ffffff;
}
.customPrimaryBgColor3 {
    background: #CCCCCC;
    color: #6B2D5C;
}
.customPrimaryBgColor1:hover {
    background: #3c1232;
    color: #ffffff;
}
.customPrimaryBgColor2:hover {
    background: #d94e26;
    color: #ffffff;
}
.customPrimaryBgColor3:hover {
    background: #CCCCCC;
    color: #6B2D5C;
}