/*--------------------------------------------------------------
    Name: ploting Construction HTML Template
    Author: DevThemeNet
    Author URL: https://www.templatemonster.com/authors/DevThemeNet/
    Description: Creative Construction HTML Template.
    Version: 1.0.4

    Create Date: 08-31-2020

    Last Update: 05-17-2024
--------------------------------------------------------------*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
    01. Common
    02. Header
    03. Home Design
    04. Mobile Nav
    05. Search Popup
    06. Main Slider
    07. Banner
    08. Feature
    09. Services
    10. About
    11. FAQ
    12. Fancy
    13. Project
    14. Testimonial
    15. Team
    16. Counter
    17. Pricing
    18. Contact
    19. Blog
    20. Get A Quote
    21. Sidebar
    22. Comment
    23. Map
    24. Login / Registration
    25. 404 Error
    26. Site Footer
--------------------------------------------------------------*/


@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700%7CPoppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i%7CUbuntu:300,300i,400,400i,500,500i,700,700i');

/*--------------------------------------------------------------
# 1. Common 
--------------------------------------------------------------*/

:root {
    --ploting-font: 'Poppins', sans-serif;
    --ploting-font-2: 'Ubuntu', sans-serif;
    --ploting-base: #fb4803;
    --ploting-base-rgb: 251, 72, 3;
    --ploting-light-ash: #f7f4ee;
    --ploting-light-ash-rgb: 247, 244, 238;
    --ploting-gray: #555555;
    --ploting-gray-rgb: 68, 68, 68;
    --ploting-gray-two: #888888;
    --ploting-gray-two-rgb: 136, 136, 136;
    --ploting-gray-three: #6a6b71;
    --ploting-gray-three-rbg: 106, 107, 113;
    --ploting-not-gray: #f4f6ff;
    --ploting-not-gray-rbg: 244, 246, 255;
    --ploting-white: #ffffff;
    --ploting-white-rgb: 255, 255, 255;
    --ploting-black: #161515;
    --ploting-black-rgb: 22, 21, 21;
    --ploting-blue: #161c49;
    --ploting-blue-rgb: 22, 28, 73;
    --ploting-bdr-radius-one: 10px;
    --ploting-bdr-radius-two: 20px;
    --ploting-bdr-radius-three: 30px;
    --ploting-heading-line-height: 1.2;
    --ploting-body-line-height: 1.6;
}

.row {
    --bs-gutter-x: 30px;
}

.gutter-y-30 {
    --bs-gutter-y: 30px;
}

* {
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
}

body {
    font-family: var(--ploting-font);
    font-size: 14px;
    color: var(--ploting-gray);
    line-height: var(--ploting-body-line-height);
    font-weight: 400;
    background: var(--ploting-white);
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--ploting-black);
    transition: linear all 300ms;
    -webkit-transition: linear all 300ms;
    -moz-transition: linear all 300ms;
    -ms-transition: linear all 300ms;
    -o-transition: linear all 300ms;
}

a:hover {
    color: var(--ploting-gray);
}

button,
a:hover,
a:focus,
a:visited {
    text-decoration: none;
    outline: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 0.7rem;
    background: none;
    line-height: var(--ploting-heading-line-height);
    font-family: var(--ploting-font-2);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

textarea {
    overflow: hidden;
}

p {
    position: relative;
    line-height: 30px;
    margin-bottom: 0em;
    font-size: 16px;
    font-weight: 400;
    color: var(--ploting-gray-three);
}

.page-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 300px;
    overflow: hidden;
}

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

img {
    display: inline-block;
    max-width: 100%;
}

.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: var(--ploting-white);
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../images/preloader.svg);
}

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

/*--------------------------------------------------------------
# 2. Header 
--------------------------------------------------------------*/
.main-header {
    background: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    transition: all 500ms ease;
    z-index: 999;
}

/* -- Top -- */
.main-header-top {
    position: relative;
    display: block;
}

.main-header-top p {
    line-height: 3em;
}

.main-header-top-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: var(--ploting-black);
    padding: 2.5px 135px 2.5px;
}

.main-header-contact-list {
    position: relative;
    display: flex;
    align-items: center;
}

.main-header-contact-list li {
    position: relative;
    display: flex;
    align-items: center;
}

.main-header-contact-list li+li {
    margin-left: 25px;
}

.main-header-contact-list li .icon {
    position: relative;
    display: flex;
    align-items: center;
}

.main-header-contact-list li .icon i {
    font-size: 12px;
    color: var(--ploting-white);
}

.main-header-contact-list li .top-text {
    margin-left: 10px;
}

.main-header-contact-list li .top-text p {
    font-size: 12px;
    color: rgba(var(--ploting-light-ash-rgb), 0.6);
}

.main-header-contact-list li .top-text p a {
    color: rgba(var(--ploting-light-ash-rgb), 0.6);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.main-header-contact-list li .top-text p a:hover {
    color: var(--ploting-base);
}

.main-header-top-text-and-social {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.main-header-top-text {
    position: relative;
    display: block;
}

.main-header-top-text p {
    font-size: 12px;
    color: rgba(var(--ploting-light-ash-rgb), 0.6);
}

.main-header-top-text p span {
    color: var(--ploting-base);
}

.main-header-top-social {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 30px;
}

.main-header-top-social a {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--ploting-white);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.main-header-top-social a:hover {
    color: var(--ploting-base);
}

.main-header-top-social a+a {
    margin-left: 28px;
}


/* -- Main Menu -- */
.main-menu {
    position: relative;
    display: block;
}

.main-menu-wrapper {
    position: relative;
    display: block;
}

.main-menu-wrapper-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 135px 0;
    z-index: 1;
}

.main-menu-left {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 100px;
    z-index: 1;
}

.main-menu-left:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--ploting-black-rgb), 0.3);
    border-radius: 0 0 50px 0;
    z-index: -1;
}

.main-menu-left:after {
    content: "";
    position: absolute;
    top: 0;
    left: -1000000px;
    right: 100%;
    bottom: 0;
    background-color: rgba(var(--ploting-black-rgb), 0.3);
    z-index: -1;
}

.main-menu-logo {
    display: block;
    padding: 22.5px 0;
    margin-right: 205px;
    z-index: 1;
}

.main-menu-main-menu-box {
    display: block;
}

.main-menu-search-cart-box {
    position: relative;
    display: flex;
    align-items: center;
    padding: 28px 0;
    margin-left: 100px;
}

.main-menu-search-box {
    position: relative;
    display: block;
}

.main-menu-search {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 17px;
    color: var(--ploting-white);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.main-menu-search:hover {
    color: var(--ploting-base);
}

.main-menu-cart-box {
    position: relative;
    display: block;
    margin-left: 25px;
}

.main-menu-cart {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 17px;
    color: var(--ploting-white);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    font-weight: 400;
}

.main-menu-cart-count {
    position: absolute;
    top: 0;
    right: -12px;
    height: 16px;
    width: 16px;
    background-color: var(--ploting-base);
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ploting-white);
}

.main-menu-cart:hover {
    color: var(--ploting-base);
}


.main-menu-right {
    position: relative;
    display: flex;
    align-items: center;
}

.main-menu-btn-box {
    position: relative;
    display: block;
}

.main-menu-btn {
    position: relative;
    display: inline-block;
    outline: none !important;
    background-color: var(--ploting-base);
    color: var(--ploting-white);
    font-size: 16px;
    font-weight: 500;
    padding: 15px 32px 15px;
    padding-right: 13px;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: 0.03em;
    transition: all 0.5s linear;
    z-index: 1;
    border: 1px solid var(--ploting-white);
    border-radius: 30px;
}

.main-menu-btn i {
    position: relative;
    margin-left: 45px;
    font-size: 15px;
    margin-right: 8px;
}

.main-menu-btn:before {
    content: "";
    position: absolute;
    width: 56px;
    height: 56px;
    top: 0;
    right: 0;
    border-radius: 50%;
    background-color: rgba(var(--ploting-black-rgb), .20);
    transform: scalex(1.0);
    transform-origin: center;
    transform-style: preserve-3d;
    -webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    transform-origin: left center;
    z-index: -1;
    border-radius: 0;
}

.main-menu-btn:hover:before {
    transform: scalex(1.1);
    transform-origin: right center;
    transition-delay: 200ms;
    width: 130%;
}

.main-menu-btn:hover {
    color: var(--ploting-white);
}

/* -- Stricky Header -- */
.stricky-header.main-menu {
    background-color: transparent;
}

.stricky-header .main-menu-wrapper-inner {
    background-color: var(--ploting-blue);
}

.main-menu .main-menu-list,
.main-menu .main-menu-list>li>ul,
.main-menu .main-menu-list>li>ul>li>ul,
.stricky-header .main-menu-list,
.stricky-header .main-menu-list>li>ul,
.stricky-header .main-menu-list>li>ul>li>ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none;
}

.main-menu .main-menu-list>li>ul {
    border-radius: var(--ploting-bdr-radius-one);
}

.main-menu .main-menu-list>li>ul>li {
    border-bottom: 1px solid rgba(var(--ploting-base-rgb), 0.4);
}

.main-menu .main-menu-list>li>ul>li:last-child {
    border-bottom: 0;
}

@media (min-width: 1200px) {

    .main-menu .main-menu-list,
    .main-menu .main-menu-list>li>ul,
    .main-menu .main-menu-list>li>ul>li>ul,
    .stricky-header .main-menu-list,
    .stricky-header .main-menu-list>li>ul,
    .stricky-header .main-menu-list>li>ul>li>ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

.main-menu .main-menu-list>li,
.stricky-header .main-menu-list>li {
    padding-top: 22.5px;
    padding-bottom: 22.5px;
    position: relative;
}

.main-menu .main-menu-list>li+li,
.stricky-header .main-menu-list>li+li {
    margin-left: 45px;
}

.main-menu .main-menu-list>li>a,
.stricky-header .main-menu-list>li>a {
    font-size: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--ploting-white);
    position: relative;
    letter-spacing: 0.02em;
    font-weight: 500;
    padding-right: 15px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.main-menu .main-menu-list>li.dropdown>a:after {
    position: absolute;
    top: 50%;
    right: 0;
    font-family: "Font Awesome 5 Free";
    content: "\f067";
    font-size: 11px;
    color: var(--ploting-white);
    font-weight: 700;
    transform: translateY(-50%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 1;
}

.main-menu .main-menu-list>li.current>a::after,
.main-menu .main-menu-list>li:hover>a::after,
.stricky-header .main-menu-list>li.current>a::after,
.stricky-header .main-menu-list>li:hover>a::after {
    color: var(--ploting-base);
}

.main-menu .main-menu-list>li.current>a,
.main-menu .main-menu-list>li:hover>a,
.stricky-header .main-menu-list>li.current>a,
.stricky-header .main-menu-list>li:hover>a {
    color: var(--ploting-base);
    text-shadow: 0.05px 0 0 rgba(var(--ploting-base-rgb), 0.8);
}

.main-menu .main-menu-list>li>ul,
.main-menu .main-menu-list>li>ul>li>ul,
.stricky-header .main-menu-list>li>ul,
.stricky-header .main-menu-list>li>ul>li>ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 270px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: scaleY(0) translateZ(100px);
    transform: scaleY(0) translateZ(100px);
    -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    z-index: 99;
    background-color: var(--ploting-white);
    padding: 25px 20px 34px;
}

.sub-menu {
    box-shadow: 0px 10px 60px 0px rgba(var(--ploting-black-rgb), 0.07);
    top: 99% !important;
}

.main-menu .main-menu-list>li>ul>li>ul>li>ul,
.stricky-header .main-menu-list>li>ul>li>ul>li>ul {
    display: none;
}

.main-menu .main-menu-list>li:hover>ul,
.main-menu .main-menu-list>li>ul>li:hover>ul,
.stricky-header .main-menu-list>li:hover>ul,
.stricky-header .main-menu-list>li>ul>li:hover>ul {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleY(1) translateZ(0px);
    transform: scaleY(1) translateZ(0px);
}

.main-menu .main-menu-list>li>ul>li,
.main-menu .main-menu-list>li>ul>li>ul>li,
.stricky-header .main-menu-list>li>ul>li,
.stricky-header .main-menu-list>li>ul>li>ul>li {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    width: 100%;
    position: relative;
}

.main-menu .main-menu-list>li>ul>li+li,
.main-menu .main-menu-list>li>ul>li>ul>li+li,
.stricky-header .main-menu-list>li>ul>li+li,
.stricky-header .main-menu-list>li>ul>li>ul>li+li {
    border-top: none;
    margin-top: 4px;
}

.main-menu .main-menu-list>li>ul>li>a,
.main-menu .main-menu-list>li>ul>li>ul>li>a,
.stricky-header .main-menu-list>li>ul>li>a,
.stricky-header .main-menu-list>li>ul>li>ul>li>a {
    position: relative;
    font-size: 15px;
    line-height: 30px;
    color: var(--ploting-gray);
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 6px 20px 6px;
    -webkit-transition: 500ms;
    transition: 500ms;
    background-color: var(--ploting-white);
    font-family: var(--ploting-font-2);
}

.main-menu .main-menu-list>li>ul>li:last-child>a,
.main-menu .main-menu-list>li>ul>li>ul>li:last-child>a,
.stricky-header .main-menu-list>li>ul>li:last-child>a,
.stricky-header .main-menu-list>li>ul>li>ul>li:last-child>a {
    border-bottom: 0;
}

.main-menu .main-menu-list>li>ul>li:hover>a,
.main-menu .main-menu-list>li>ul>li>ul>li:hover>a,
.stricky-header .main-menu-list>li>ul>li:hover>a,
.stricky-header .main-menu-list>li>ul>li>ul>li:hover>a {
    color: var(--ploting-black);
}

.main-menu .main-menu-list>li>ul>li>a::before,
.main-menu .main-menu-list>li>ul>li>ul>li>a::before,
.stricky-header .main-menu-list>li>ul>li>a::before,
.stricky-header .main-menu-list>li>ul>li>ul>li>a::before {
    position: absolute;
    top: 50%;
    right: 20px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061";
    font-size: 14px;
    color: var(--ploting-base);
    transform: translateY(-50%) scale(0);
    -webkit-transition: 500ms;
    transition: 500ms;
}

.main-menu .main-menu-list>li>ul>li:hover>a::before,
.main-menu .main-menu-list>li>ul>li>ul>li:hover>a::before,
.stricky-header .main-menu-list>li>ul>li:hover>a::before,
.stricky-header .main-menu-list>li>ul>li>ul>li:hover>a::before {
    transform: translateY(-50%) scale(1);
}

.main-menu .main-menu-list>li>ul>li>ul,
.stricky-header .main-menu-list>li>ul>li>ul {
    top: 0;
    left: 100%;
}

.main-menu .main-menu-list li ul li>ul.right-align,
.stricky-header .main-menu-list li ul li>ul.right-align {
    top: 0;
    left: auto;
    right: 100%;
}

.main-menu-three-main-menu-box .main-menu-list>.megamenu,
.main-menu-two-main-menu-box .main-menu-list>.megamenu,
.main-menu-wrapper .main-menu-list>.megamenu {
    position: static;
}

.main-menu-three-main-menu-box .main-menu-list>.megamenu>ul,
.main-menu-two-main-menu-box .main-menu-list>.megamenu>ul,
.main-menu-wrapper .main-menu-list>.megamenu>ul {
    top: 94% !important;
    left: 0 !important;
    right: 0 !important;
    background-color: transparent;
}

.main-menu-three-main-menu-box .main-menu-list>.megamenu>ul>li,
.main-menu-two-main-menu-box .main-menu-list>.megamenu>ul>li,
.main-menu-wrapper .main-menu-list>.megamenu>ul>li {
    padding: 0 !important;
}

.stricky-header {
    position: fixed;
    z-index: 991;
    top: 0;
    left: 0;
    background-color: var(--ploting-white);
    width: 100%;
    visibility: hidden;
    -webkit-transform: translateY(-120%);
    transform: translateY(-120%);
    -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease;
    transition: visibility 500ms ease, -webkit-transform 500ms ease;
    transition: transform 500ms ease, visibility 500ms ease;
    transition: transform 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease;
    -webkit-box-shadow: 0px 10px 60px 0px rgba(var(--ploting-black-rgb), 0.05);
    box-shadow: 0px 10px 60px 0px rgba(var(--ploting-black-rgb), 0.05);
}

@media (max-width: 1199px) {
    .stricky-header {
        display: none !important;
    }
}

.stricky-header.stricky-fixed {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
}

.stricky-header .main-menu-inner {
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-right: 0;
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
}

.mobile-nav-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    margin-right: 10px;
}

@media (min-width: 1200px) {
    .mobile-nav-buttons {
        display: none;
    }
}

.mobile-nav-buttons a {
    font-size: 20px;
    color: var(--ploting-base);
    cursor: pointer;
}

.mobile-nav-buttons a+a {
    margin-left: 10px;
}

.mobile-nav-buttons a:hover {
    color: var(--ploting-base);
}

.main-menu .mobile-nav-toggler {
    font-size: 20px;
    color: var(--ploting-white);
    cursor: pointer;
    -webkit-transition: 500ms;
    transition: 500ms;
}

.main-menu .mobile-nav-toggler:hover {
    color: var(--ploting-base);
}

@media (min-width: 1200px) {
    .main-menu .mobile-nav-toggler {
        display: none;
    }
}

/*--------------------------------------------------------------
# 3. Home Design
--------------------------------------------------------------*/
.home-design {
    margin-top: -26px;
    margin-bottom: -26px;
}

.home-design-inner {
    padding: 40px 40px 36px;
    background-color: var(--ploting-white);
    box-shadow: 0px 10px 60px 0px rgba(var(--ploting-black-rgb), 0.07);
    border-radius: var(--ploting-bdr-radius-two);
}

.home-design .row {
    --bs-gutter-x: 42px;
    --bs-gutter-y: 20px;
}

.home-design-image {
    position: relative;
    background-color: var(--ploting-base);
    border-radius: var(--ploting-bdr-radius-one);
    overflow: hidden;
}

.home-design-image>img {
    width: 100%;
    border-radius: var(--ploting-bdr-radius-one);
    -webkit-transition: 500ms ease;
    transition: 500ms ease;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.home-design-image:hover>img {
    opacity: 0.75;
}

.home-design-image:hover .home-design-buttons {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
    visibility: visible;
}

.home-design-buttons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    opacity: 0;
    visibility: hidden;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transition: 500ms ease;
    transition: 500ms ease;
}

.home-design-buttons-item {
    padding: 10px 20px 11px;
    text-align: center;
}

.home-design-buttons-item::before {
    height: 56px;
    right: -41px;
    border-radius: 45%;
}

.home-design-buttons-item+.home-design-buttons-item {
    margin-top: 10px;
}

.home-design-title {
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--ploting-black);
    margin-top: 17px;
}

.mobile-nav-wrapper .home-design .row [class*=col-] {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
}

.mobile-nav-wrapper .home-design-inner {
    padding: 15px 0px;
    background-color: rgba(var(--ploting-black-rgb), 0);
}

.mobile-nav-wrapper .home-design-title {
    color: var(--ploting-white, var(--ploting-white));
}

/*--------------------------------------------------------------
# 4. Mobile Nav
--------------------------------------------------------------*/
.mobile-nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
    transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
    transition: transform 500ms ease 500ms, visibility 500ms ease 500ms;
    transition: transform 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
    visibility: hidden;
}

.mobile-nav-wrapper .container {
    padding-left: 0;
    padding-right: 0;
}

.mobile-nav-wrapper.expanded {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    visibility: visible;
    -webkit-transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
    transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
    transition: transform 500ms ease 0ms, visibility 500ms ease 0ms;
    transition: transform 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
}

.mobile-nav-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ploting-black);
    opacity: 0.5;
    cursor: pointer;
}

.mobile-nav-content {
    width: 300px;
    background-color: var(--ploting-black);
    z-index: 10;
    position: relative;
    height: 100%;
    overflow-y: auto;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
    transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
    transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms;
    transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
}

.mobile-nav-wrapper.expanded .mobile-nav-content {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
    transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
    transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms;
    transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
}

.mobile-nav-content .logo-box {
    margin-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 18px;
    color: var(--ploting-white);
    cursor: pointer;
}

.mobile-nav-content .main-menu-list,
.mobile-nav-content .main-menu-list>li>ul,
.mobile-nav-content .main-menu-list>li>ul>li>ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.mobile-nav-content .main-menu-list>li>ul,
.mobile-nav-content .main-menu-list>li>ul>li>ul {
    display: none;
    border-top: 1px solid rgba(var(--ploting-white-rgb), 0.1);
    margin-left: 0.5em;
}

.mobile-nav-content .main-menu-list>li:not(:last-child),
.mobile-nav-content .main-menu-list>li>ul>li:not(:last-child),
.mobile-nav-content .main-menu-list>li>ul>li>ul>li:not(:last-child) {
    border-bottom: 1px solid rgba(var(--ploting-white-rgb), 0.1);
}

.mobile-nav-content .main-menu-list>li>a>.main-menu-border {
    display: none !important;
}

.mobile-nav-content .main-menu-list>li>a,
.mobile-nav-content .main-menu-list>li>ul>li>a,
.mobile-nav-content .main-menu-list>li>ul>li>ul>li>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    line-height: 30px;
    color: var(--ploting-white);
    font-size: 14px;
    font-family: var(--ploting-font);
    font-weight: 500;
    height: 46px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 500ms;
    transition: 500ms;
}

.mobile-nav-content .main-menu-list>li>a.expanded .mobile-nav-content .main-menu-list>li>ul>li>a.expanded .mobile-nav-content .main-menu-list>li>ul>li>ul>li>a.expanded {
    color: var(--ploting-base);
}

.mobile-nav-content .main-menu-list li a.expanded {
    color: var(--ploting-base);
}

.mobile-nav-content .main-menu-list>li>a>button,
.mobile-nav-content .main-menu-list>li>ul>li>a>button,
.mobile-nav-content .main-menu-list>li>ul>li>ul>li>a>button {
    width: 30px;
    height: 30px;
    background-color: var(--ploting-base);
    border: none;
    outline: none;
    color: var(--ploting-white);
    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;
    text-align: center;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: -webkit-transform 500ms ease;
    transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    transition: transform 500ms ease, -webkit-transform 500ms ease;
    padding: 0;
}

.mobile-nav-content .main-menu-list>li>a>button.expanded,
.mobile-nav-content .main-menu-list>li>ul>li>a>button.expanded,
.mobile-nav-content .main-menu-list>li>ul>li>ul>li>a>button.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    background-color: var(--ploting-white);
    color: var(--ploting-base);
}

.mobile-nav-content .main-menu-list>li>ul>li>ul>li>a>button,
.mobile-nav-content .main-menu-list>li>ul>li>ul>li>ul {
    display: none !important;
}

.mobile-nav-content .main-menu-list li.cart-btn span {
    position: relative;
    top: auto;
    right: auto;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.mobile-nav-content .main-menu-list li.cart-btn i {
    font-size: 16px;
}

.mobile-nav-top {
    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;
    margin-bottom: 30px;
}

.mobile-nav-top .main-menu-login a {
    color: var(--ploting-text-dark);
}

.mobile-nav-container {
    border-top: 1px solid rgba(var(--ploting-white-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--ploting-white-rgb), 0.1);
}

.mobile-nav-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.mobile-nav-social a {
    font-size: 16px;
    color: var(--ploting-white);
    -webkit-transition: 500ms;
    transition: 500ms;
}

.mobile-nav-social a+a {
    margin-left: 30px;
}

.mobile-nav-social a:hover {
    color: var(--ploting-base);
}

.mobile-nav-contact {
    margin-bottom: 0;
    margin-top: 20px;
    margin-bottom: 20px;
}

.mobile-nav-contact li {
    color: var(--ploting-text-dark);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.mobile-nav-contact li+li {
    margin-top: 15px;
}

.mobile-nav-contact li a {
    color: var(--ploting-white);
    -webkit-transition: 500ms;
    transition: 500ms;
}

.mobile-nav-contact li a:hover {
    color: var(--ploting-base);
}

.mobile-nav-contact li>i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--ploting-base);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    font-size: 11px;
    margin-right: 10px;
    color: var(--ploting-white);
}

.mobile-nav-container .main-logo,
.mobile-nav-container .topbar-buttons,
.mobile-nav-container .main-menu-language,
.mobile-nav-container .main-menu-login {
    display: none;
}

/*--------------------------------------------------------------
# 5. Search Popup
--------------------------------------------------------------*/
.search-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    padding-left: 20px;
    padding-right: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%);
    -webkit-transition: opacity 500ms ease, -webkit-transform 500ms ease;
    transition: opacity 500ms ease, -webkit-transform 500ms ease;
    transition: transform 500ms ease, opacity 500ms ease;
    transition: transform 500ms ease, opacity 500ms ease, -webkit-transform 500ms ease;
}

.search-popup.active {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.search-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ploting-black);
    opacity: 0.75;
    cursor: pointer;
}

.search-popup-content {
    width: 100%;
    max-width: 560px;
}

.search-popup-content form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    background-color: var(--ploting-white);
    border-radius: 50px;
    overflow: hidden;
}

.search-popup-content form input[type="search"],
.search-popup-content form input[type="text"] {
    width: 100%;
    background-color: var(--ploting-white);
    font-size: 16px;
    border: none;
    outline: none;
    height: 66px;
    padding-left: 30px;
    border-radius: 0px;
}

.search-popup-content .btn-search {
    padding: 0;
    width: 68px;
    height: 68px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    right: -1px;
    background-color: var(--ploting-base);
    border: 0;
}

.search-popup-content .btn-search i {
    height: auto;
    width: auto;
    background-color: transparent;
    border-radius: 50%;
    color: var(--ploting-white);
    font-size: 22px;
    line-height: inherit;
    text-align: center;
    top: 0;
    margin-right: 5px;
    padding-left: 0;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.search-popup-content .btn-search:hover:before {
    width: 150%;
}


/*--------------------------------------------------------------
# 6. Main Slider
--------------------------------------------------------------*/
.slider {
    position: relative;
}

.slider .content.alternate {
    max-width: 610px;
    width: 100%;
    float: right;
    display: block;
}

.slider .slide {
    position: relative;
    padding: 15% 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.slider .slider-padding-01 {
    padding: 20% 0;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.slider .span-color-size {
    font-weight: 700;
    color: var(--ploting-base);
    text-shadow: 2px 2px var(--ploting-white)
}

.slider h2 {
    position: relative;
    color: var(--ploting-white);
    font-size: 74px;
    font-weight: 600;
    line-height: 1.2em;
    margin-bottom: 30px;
    opacity: 0;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 100ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
    font-family: var(--ploting-font);
}

.slider .active h2 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition-delay: 1300ms;
    z-index: 1;
}

.slider .slideimg img {
    position: relative;
    left: 30px;
    border-radius: 200px 30px 30px 30px;
    z-index: 1;
}

.slider .slideimg::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    background: var(--ploting-base);
    top: 0;
    right: 0;
}

.slider .slideimg::after {
    content: "";
    position: absolute;
    width: 8%;
    height: 100%;
    background: var(--ploting-blue);
    bottom: 0;
    right: 0;
}

.slider h2.style-two {
    font-weight: 500;
    margin-bottom: 40px;
}

.slider h2.style-three {
    font-weight: 500;
    margin-bottom: 20px;
}

.slider h2.alternate {
    margin-bottom: 35px;
}

.slider h3 {
    position: relative;
    color: var(--ploting-white);
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 20px;
    display: inline-block;
    opacity: 0;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 100ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
    font-family: var(--ploting-font);
}

.slider .active h3 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition-delay: 1000ms;
}

.slider .slider-text {
    position: relative;
    color: var(--ploting-white);
    font-size: 18px;
    opacity: 0;
    font-weight: 500;
    margin-bottom: 45px;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 100ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
    font-family: var(--ploting-font);
}

.slider .active .slider-text {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition-delay: 2000ms;
    z-index: 1;
}

.slider .link-box {
    opacity: 0;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 100ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
}

.slider .link-holder {
    z-index: 1;
}

.slider .link-box .op-btn {
    margin-right: 10px;
}

.slider .active .link-box {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition-delay: 2500ms;
}

.slider .content .title {
    position: relative;
    color: var(--ploting-white);
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 20px;
    margin-bottom: 25px;
    opacity: 0;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 100ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
}

.slider .content .title:after {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0px;
    width: 70px;
    height: 1px;
    margin-left: -35px;
    background-color: var(--ploting-white);
}

.slider .active .title {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition-delay: 600ms;
}

.slider .content .link-holder {
    display: flex;
}

.link-holder .btn-style-three {
    border: 1px solid var(--ploting-white);
}

.slider .owl-nav {
    position: absolute;
    left: 0px;
    top: 50%;
    z-index: 1;
    width: 100%;
    margin-top: -20px;
    font-size: 28px;
}

.slider .owl-nav .owl-prev {
    position: absolute;
    right: 40px;
    top: 20px;
    color: var(--ploting-gray);
    font-size: 38px;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    width: 65px;
    height: 65px;
    background: var(--ploting-white) !important;
    border-radius: 50%;
}

.slider .owl-nav .owl-next {
    position: absolute;
    right: 40px;
    bottom: 20px;
    color: var(--ploting-gray);
    font-size: 38px;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    width: 65px;
    height: 65px;
    background: var(--ploting-white) !important;
    border-radius: 50%;
}

.slider .owl-nav .owl-prev:hover,
.slider .owl-nav .owl-next:hover {
    color: var(--ploting-base);
}

/* -- Slider Two -- */

.slide-two {
    position: relative;
    padding: 16% 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.slide-two::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 100%;
    top: 0;
    left: 30px;
    background: rgba(var(--ploting-blue-rgb), 0.8);
    clip-path: polygon(0 0, 50% -30%, 100% 100%, 30% 100%);
}

/* -- Slider Three -- */

.slide-three {
    position: relative;
    padding: 16% 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.slide-three::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--ploting-blue);
    clip-path: polygon(0px 0px, 50% -34%, 100% 100%, 0px 100%);
}

.slide-three::after {
    position: absolute;
    content: "";
    width: 45%;
    height: 100%;
    right: -20%;
    top: 0;
    background: var(--ploting-base);
    clip-path: polygon(0.24% -0.7%, 58.34% 0.11%, 58.33% 101.31%, 31.71% 100.2%)
}

/* -- Slider Four -- */

.slide-four {
    position: relative;
    padding: 16% 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.slide-four::before {
    content: "";
    position: absolute;
    width: 92%;
    height: 100%;
    top: 0;
    background: rgba(var(--ploting-blue-rgb), 0.9);
}

.slide-four::after {
    content: "";
    position: absolute;
    width: 8%;
    height: 100%;
    top: 0;
    right: 0;
    background: var(--ploting-base);
}

/*-------------------------------------------------------------- 
# 7. Banner 
--------------------------------------------------------------*/

.banner-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    z-index: 0;
}

.banner-section:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(var(--ploting-black-rgb), 0.75);
    z-index: -1;
}

.banner-heading {
    padding: 208px 0 80px;
}

.banner-heading h2 {
    color: var(--ploting-base);
    font-size: 50px;
    font-weight: 600;
    text-transform: capitalize;
}

.banner-heading-two {
    padding: 200px 0 70px;
}

.banner-heading-two h2 {
    color: var(--ploting-base);
    font-size: 50px;
    font-weight: 600;
    text-transform: capitalize;
}

.banner-link {
    padding: 30px;
    background-color: rgba(var(--ploting-black-rgb), 0.2);
    display: inline-block;
    border-radius: 20px 20px 0 0;
}

.banner-link li {
    display: inline-block;
    color: var(--ploting-white);
    font-size: 14px;
    text-transform: uppercase;
}

.banner-section li a,
.banner-link li span {
    color: var(--ploting-white);
    padding: 0 15px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}



.banner-link li i {
    font-weight: 300;
    font-size: 12px;
    vertical-align: middle;
    margin-top: 0;
    color: var(--ploting-white);
}

.banner-section li a:hover,
.banner-link li .active {
    color: var(--ploting-base);
}

/*--------------------------------------------------------------
# 8. Feature
--------------------------------------------------------------*/
.feature-section {
    position: relative;
    display: block;
}

.feature-with-color-bg {
    background: var(--ploting-not-gray);
    padding: 120px 0 92px;
}

.feature-no-color-bg {
    padding: 120px 0 92px;
}

/* Feature One */

.feature-one {
    margin-top: -130px;
    padding: 0 0 46px;
    z-index: 2;
}

.feature-one .container {
    max-width: 1650px;
}

.feature-one .row {
    --bs-gutter-x: 0px;
}

.feature-one-single {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgb(var(--ploting-white-rgb));
    box-shadow: 0px 10px 60px 0px rgba(var(--ploting-black-rgb), 0.07);
    padding: 20px 40px 30px;
    padding-right: 40px;
    margin-bottom: 30px;
    z-index: 1;
}

.feature-one-single.left-radius,
.feature-one-single.left-radius::before {
    border-radius: 20px 0 0 20px;
}

.feature-one-single.right-radius,
.feature-one-single.right-radius::before {
    border-radius: 0 20px 20px 0;
}

.feature-one-single::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ploting-base);
    transform: scaleX(0.7) rotateX(20deg);
    opacity: 0;
    transition: all 0.4s linear;
    z-index: -1;
}

.feature-one-single:hover:before {
    transform: scaleX(1.0) rotateX(0deg);
    transition: all 0.4s linear;
    opacity: 1;
}

.feature-one-icon {
    position: relative;
    display: inline-block;
}

.feature-one-icon i {
    position: relative;
    display: inline-block;
    font-size: 120px;
    color: var(--ploting-base);
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.feature-one-icon i[class^="flaticon-"]:before {
    font-size: 60px;
}

.feature-one-single:hover .feature-one-icon i {
    color: var(--ploting-white);
    transform: scale(.9);
}

.feature-one-content {
    position: relative;
    display: block;
    margin-left: 20px;
}

.feature-one-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
}

.feature-one-title a {
    color: var(--ploting-black);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.feature-one-single:hover .feature-one-title a {
    color: var(--ploting-white);
}

.feature-one-text {
    font-size: 14px;
    line-height: 30px;
    color: var(--ploting-gray-three);
    margin-top: 6px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.feature-one-single:hover .feature-one-text {
    color: var(--ploting-white);
}

/* -- Feature Two -- */

.feature-two {
    margin-top: -145px;
    padding: 0 0 90px;
    z-index: 2;
}

.feature-two .container {
    max-width: 1650px;
}

.feature-two .row {
    --bs-gutter-x: 0px;
}

.feature-two-single {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgb(var(--ploting-white-rgb));
    box-shadow: 0px 10px 60px 0px rgba(var(--ploting-black-rgb), 0.07);
    padding: 20px 40px 30px;
    padding-right: 40px;
    margin-bottom: 30px;
    z-index: 1;
    margin: 20px;
    border-radius: var(--ploting-bdr-radius-three);
    overflow: hidden;
}

.feature-two-single::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ploting-base);
    transform: scaleX(0.7) rotateX(20deg);
    opacity: 0;
    transition: all 0.4s linear;
    z-index: -1;
    border-radius: var(--ploting-bdr-radius-three);
}

.feature-two-single:hover:before {
    transform: scaleX(1.0) rotateX(0deg);
    transition: all 0.4s linear;
    opacity: 1;
}

.feature-two-icon {
    position: relative;
    display: inline-block;
}

.feature-two-icon i {
    position: relative;
    display: inline-block;
    font-size: 120px;
    color: var(--ploting-base);
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.feature-two-icon i[class^="flaticon-"]:before {
    font-size: 60px;
}

.feature-two-single:hover .feature-two-icon i {
    color: var(--ploting-white);
    transform: scale(.9);
}

.feature-two-content {
    position: relative;
    display: block;
    margin-left: 20px;
}

.feature-two-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
}

.feature-two-title a {
    color: var(--ploting-black);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.feature-two-single:hover .feature-two-title a {
    color: var(--ploting-white);
}

.feature-two-text {
    font-size: 14px;
    line-height: 30px;
    color: var(--ploting-gray-three);
    margin-top: 6px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.feature-two-single:hover .feature-two-text {
    color: var(--ploting-white) !important;
}

.feature-two figure {
    position: relative;
    text-align: center;
}

.feature-two figure img {
    position: absolute;
    bottom: -265px;
    border-radius: var(--ploting-bdr-radius-three);
    border: 3px solid transparent;
    box-shadow: -5px -5px 0 5px rgba(var(--ploting-base-rgb), 1);
}

/* Feature Three */

.feature-three {
    margin-top: -130px;
    padding: 0 0 46px;
    z-index: 2;
}

.feature-three .container {
    max-width: 1650px;
}

.feature-three .row {
    --bs-gutter-x: 0px;
}



.feature-three-single {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgb(var(--ploting-white-rgb));
    box-shadow: 0px 10px 60px 0px rgba(var(--ploting-black-rgb), 0.07);
    padding: 20px 20px 30px;
    padding-right: 40px;
    margin-bottom: 30px;
    z-index: 1;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: var(--ploting-bdr-radius-two);
}

.feature-three-single::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ploting-base);
    transform: scaleX(0.7) rotateX(20deg);
    opacity: 0;
    transition: all 0.4s linear;
    z-index: -1;
    border-radius: var(--ploting-bdr-radius-two);
}

.feature-three-single:hover:before {
    transform: scaleX(1.0) rotateX(0deg);
    transition: all 0.4s linear;
    opacity: 1;
}

.feature-three-icon {
    position: relative;
    display: inline-block;
}

.feature-three-icon i {
    position: relative;
    display: inline-block;
    font-size: 120px;
    color: var(--ploting-base);
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.feature-three-icon i[class^="flaticon-"]:before {
    font-size: 60px;
}

.feature-three-single:hover .feature-three-icon i {
    color: var(--ploting-white);
    transform: scale(.9);
}

.feature-three-content {
    position: relative;
    display: block;
    margin-left: 20px;
}

.feature-three-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
}

.feature-three-title a {
    color: var(--ploting-black);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.feature-three-single:hover .feature-three-title a {
    color: var(--ploting-white);
}

.feature-three-text {
    font-size: 14px;
    line-height: 30px;
    color: var(--ploting-gray-three);
    margin-top: 6px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.feature-three-single:hover .feature-three-text {
    color: var(--ploting-white);
}


/*-------------------------------------------------------------- 
# 9. Services
--------------------------------------------------------------*/

.services-section {
    position: relative;
    display: block;
}

.services-with-color-bg {
    background: var(--ploting-not-gray);
    padding: 120px 0 93px;
}

.services-no-color-bg {
    padding: 120px 0 93px;
}

/* Service Details */

.service-details {
    position: relative;
}

.service-details-with-color-bg {
    background: var(--ploting-not-gray);
    padding: 120px 0 92px;
}

.service-details-no-color-bg {
    padding: 120px 0 93px;
}

.service-showdo-box {
    position: relative;
    padding: 30px 30px 20px 50px;
    background: var(--ploting-blue);
    margin: 30px 0;
    border-radius: var(--ploting-bdr-radius-two) 0 0 var(--ploting-bdr-radius-two);
}

.service-showdo-box::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 10px;
    right: 0;
    top: 0;
    background: var(--ploting-base);
}

.service-showdo-box blockquote {
    font-size: 20px;
    font-weight: 500;
    font-style: italic;
    color: var(--ploting-white);
}

.service-thumb {
    border-radius: var(--ploting-bdr-radius-one);
    overflow: hidden;
}

.service-thumb img {
    width: 100%;
}

.service-details-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
    margin-top: 44px;
    margin-bottom: 18px;
    color: var(--ploting-black);
}

.service-info {
    background: var(--ploting-blue);
    color: var(--ploting-white);
    padding: 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--ploting-bdr-radius-one);
}

.service-info ul li {
    padding: 5px 0;
}

.service-info ul li span {
    font-weight: 400;
}

.service-rating a i {
    color: var(--ploting-base);
}

.service-one-img-2 {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--ploting-bdr-radius-one);
}

.service-one-img-2 img {
    width: 100%;
    border-radius: var(--ploting-bdr-radius-one);
}

.service-one-shape-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 140px;
    height: 140px;
    background-color: var(--ploting-base);
    border-radius: 0 50% 0 0;
}

.service-one-video-link {
    position: absolute;
    bottom: 42px;
    left: 40px;
    z-index: 3;
}

.service-one-video-icon {
    position: relative;
    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;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 13px;
    color: var(--ploting-white);
    border-radius: 50%;
    background-color: var(--ploting-base);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.service-one-video-icon:hover {
    background-color: var(--ploting-blue);
    color: var(--ploting-white);
}

.service-one-video-icon:before {
    position: absolute;
    top: -9px;
    left: -9px;
    right: -9px;
    bottom: -9px;
    content: "";
    border-radius: 50%;
    border: 1px solid rgba(var(--ploting-white-rgb), .31);
    z-index: 1;
}

.service-one-video-link .ripple,
.service-one-video-icon .ripple:before,
.service-one-video-icon .ripple:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -o-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -webkit-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
}

.service-one-video-icon .ripple:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    content: "";
    position: absolute;
}

.service-one-video-icon .ripple:after {
    content: "";
    position: absolute;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}


/*-------------------------------------------------------------- 
# 10. About
--------------------------------------------------------------*/


.about-section {
    position: relative;
}

.about-section-bg {
    background: var(--ploting-not-gray);
}

.about-section-position {
    padding-top: 130px;
}

.about-inner {
    padding: 120px 0 120px;
}

.about-inner .about-two-img-box-two::before {
    background-color: var(--ploting-not-gray);
}

/* Video Holder */

.video-holder {
    position: relative;
}

.video-holder .image {
    position: relative;
    overflow: hidden;
}

.video-holder .image img {
    position: relative;
    width: 100%;
}

.video-holder .overlay-holder {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    line-height: 80px;
    background: rgba(12, 101, 237, 0.08);
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.video-holder .overlay-holder:hover {
    background: rgba(68, 57, 120, 0.20);
}

.video-holder .overlay-holder span {
    position: relative;
    width: 80px;
    height: 80px;
    top: 41%;
    z-index: 99;
    color: var(--ploting-black);
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    border-radius: 50%;
    padding-left: 0;
    background-color: var(--ploting-white);
    display: inline-block;
    margin-top: -40px;
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
}

.video-holder .overlay-holder span:before {
    font-size: 30px;
    margin-left: 0;
    color: var(--ploting-gray);
    font-weight: 700;
}

.video-holder .ripple,
.video-holder .ripple:before,
.video-holder .ripple:after {
    position: absolute;
    top: 48%;
    left: 50%;
    height: 82px;
    width: 82px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform-origin: center;
    transform-origin: center center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), .3);
    -moz-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), .3);
    -ms-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), .3);
    -o-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), .3);
    box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), .3);
    -webkit-animation: ripple 3s infinite;
    -moz-animation: ripple 3s infinite;
    -ms-animation: ripple 3s infinite;
    -o-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
}

.video-holder .ripple:before {
    -webkit-animation-delay: .9s;
    -moz-animation-delay: .9s;
    -ms-animation-delay: .9s;
    -o-animation-delay: .9s;
    animation-delay: .9s;
    content: "";
    position: absolute;
}

.video-holder .ripple:after {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    -ms-animation-delay: .6s;
    -o-animation-delay: .6s;
    animation-delay: .6s;
    content: "";
    position: absolute;
}

@-webkit-keyframes ripple {
    70% {
        box-shadow: 0 0 0 20px rgba(var(--ploting-white-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0);
    }
}

@keyframes ripple {
    70% {
        box-shadow: 0 0 0 20px rgba(var(--ploting-white-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0);
    }
}

.video-holder .overlay-holder-two {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    line-height: 80px;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.video-holder .overlay-holder-two span {
    position: relative;
    width: 80px;
    height: 80px;
    top: 45%;
    z-index: 99;
    color: var(--ploting-black);
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    border-radius: 50%;
    padding-left: 4px;
    background-color: var(--ploting-white);
    display: inline-block;
    margin-top: -40px;
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
}

.video-holder .overlay-holder-two span:before {
    font-size: 30px;
    margin-left: 0;
    color: var(--ploting-gray);
}

.video-holder .overlay-holder-two:hover span {
    transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
}

/* About One */
.about-one {
    display: block;
    padding: 0 0 218px;
    z-index: 1;
}

.about-one-left {
    position: relative;
    display: block;
    margin-left: 80px;
    margin-top: 45px;
}

.about-one-img {
    position: relative;
    display: block;
    border-radius: var(--ploting-bdr-radius-one);
}

.about-one-img>img {
    width: 100%;
    border-radius: var(--ploting-bdr-radius-one);
}

.about-one-experience-text {
    position: absolute;
    top: 107px;
    right: -145px;
}

.about-one-experience-text p.about-slog-info-one {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: rgba(106, 107, 113, .45);
    letter-spacing: 0.2em;
    transform: rotate(90deg);
    text-transform: uppercase;
    position: relative;
    bottom: -64px;
    left: -42px;
}

.about-one-experience-text p.about-slog-info-two {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: rgba(106, 107, 113, .45);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    bottom: -131px;
    left: 24px;
}

.about-one-img-box {
    position: absolute;
    right: -170px;
    bottom: -322px;
    border-radius: var(--ploting-bdr-radius-one);
    z-index: 1;
}

.about-one-img-box::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    background-color: var(--ploting-white);
    border-radius: var(--ploting-bdr-radius-one);
    z-index: -1;
}

.about-one-img-2 {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--ploting-bdr-radius-one);
}

.about-one-img-2 img {
    width: 100%;
    border-radius: var(--ploting-bdr-radius-one);
}

.about-one-shape-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 140px;
    height: 140px;
    background-color: var(--ploting-base);
    border-radius: 0 50% 0 0;
}

.about-one-video-link {
    position: absolute;
    bottom: 42px;
    left: 40px;
    z-index: 3;
}

.about-one-video-icon {
    position: relative;
    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;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 13px;
    color: var(--ploting-white);
    border-radius: 50%;
    background-color: var(--ploting-base);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.about-one-video-icon:hover {
    background-color: var(--ploting-blue);
    color: var(--ploting-white);
}

.about-one-video-icon:before {
    position: absolute;
    top: -9px;
    left: -9px;
    right: -9px;
    bottom: -9px;
    content: "";
    border-radius: 50%;
    border: 1px solid rgba(var(--ploting-white-rgb), .31);
    z-index: 1;
}

.about-one-video-link .ripple,
.about-one-video-icon .ripple:before,
.about-one-video-icon .ripple:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -o-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -webkit-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
}

.about-one-video-icon .ripple:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    content: "";
    position: absolute;
}

.about-one-video-icon .ripple:after {
    content: "";
    position: absolute;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.about-one-project-complete {
    position: absolute;
    bottom: -298px;
    left: 55px;
    background-color: var(--ploting-blue);
    border-radius: 10px 10px 10px 50%;
    text-align: center;
    width: 265px;
    height: 265px;
    padding: 32px 30px 31px;
}

.about-one-count {
    position: relative;
    display: flex;
    justify-content: center;
}

.about-one-count .count-text {
    font-size: 90px;
    font-weight: 800;
    line-height: 80px;
    color: var(--ploting-white);
}

.about-one-count span {
    font-size: 40px;
    font-weight: 600;
    line-height: 65px;
    color: var(--ploting-white);
    position: relative;
    top: -12px;
}

.about-one-count-text {
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    color: var(--ploting-white);
    margin-top: 12px;
}

.about-one-right {
    position: relative;
    display: block;
    margin-right: 128px;
    margin-top: 45px;
}

.about-one-points {
    position: relative;
    display: block;
    margin-top: 17px;
    margin-bottom: 17px;
}

.about-one-points li {
    position: relative;
    display: flex;
    align-items: center;
}

.about-one-points li+li {
    margin-top: 5px;
}

.about-one-points li .icon {
    position: relative;
    display: inline-block;
}

.about-one-points li .icon span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    font-size: 9px;
    color: var(--ploting-white);
    background-color: var(--ploting-base);
    border-radius: 50%;
}

.about-one-points li .about-text {
    margin-left: 15px;
}

.about-one-points li .about-text p {
    color: var(--ploting-black);
    font-size: 16px;
    font-weight: 500;
}

.about-one-it-solution {
    position: relative;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--ploting-not-gray);
    border-bottom: 1px solid var(--ploting-not-gray);
    padding: 27px 0 26px;
}

.about-one-it-solution-img {
    position: relative;
    display: block;
}

.about-one-it-solution-img img {
    width: auto;
    border-radius: var(--ploting-bdr-radius-one);
}

.about-one-it-solution-content {
    position: relative;
    display: block;
    margin-left: 30px;
}

.about-one-it-solution-content p {
    font-weight: 600;
    color: var(--ploting-black);
}

.about-one-it-solution-content p span {
    color: var(--ploting-base);
    font-size: 24px;
}

.about-one-btn-and-contact {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ploting-not-gray);
}

.about-one-btn-box {
    position: relative;
    display: flex;
}

.about-one-contact-box {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 25px;
}

.about-one-contact-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 59px;
    border-radius: 50%;
    background-color: var(--ploting-blue);
    box-shadow: 0px 10px 60px 0px rgba(var(--ploting-black-rgb), 0.07);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.about-one-contact-icon:hover {
    background-color: rgba(var(--ploting-blue-rgb), 0.5);
}

.about-one-contact-icon span {
    position: relative;
    display: inline-block;
    font-size: 22px;
    color: var(--ploting-base);
}

.about-one-contact {
    position: relative;
    display: block;
    margin-left: 12px;
}

.about-one-contact>span {
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ploting-gray);
}

.about-one-contact>p {
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
}

.about-one-contact>p>a {
    color: var(--ploting-black);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.about-one-contact>p>a:hover {
    color: var(--ploting-base);
}

/* About Two */
.about-two {
    display: block;
    padding: 130px 0 120px;
    z-index: 1;
}

.about-img-box {
    position: relative;
    margin-bottom: 140px;
}

.about-two-img-box-one {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 1px 10px 0px 0px rgba(var(--ploting-base-rgb), 1);
    border: 3px solid transparent;
}

.about-two-img-box-one img {
    border-radius: 50%;
}

.about-two-img-box-two {
    position: absolute;
    top: 80px;
    left: 120px;
    border-radius: var(--ploting-bdr-radius-two);
}

.about-two-img-box-two::before {
    content: "";
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    background-color: var(--ploting-white);
    border-radius: var(--ploting-bdr-radius-two);
    z-index: 1;
}

.about-two-img-box-two img {
    z-index: 2;
    position: relative;
    border-radius: var(--ploting-bdr-radius-two);
}

.about-two-experience-text {
    position: absolute;
    top: 36px;
    left: 205px;
}

.about-two-experience-text p.about-slog-info-two {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: rgba(106, 107, 113, .45);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.about-two-right {
    position: relative;
    display: block;
    margin-right: 80px;
    margin-top: 45px;
}

.about-two-left {
    position: relative;
    display: block;
    margin-left: 80px;
    margin-top: 45px;
}

/* -- About Three -- */

.about-three {
    display: block;
    padding: 120px 0 120px;
    z-index: 1;
}

.about-three-right {
    position: relative;
    display: block;
    margin-right: 128px;
    margin-top: 0;
}

.about-three-img {
    position: relative;
    display: block;
    border-radius: var(--ploting-bdr-radius-one);
}

.about-three-img>img {
    position: relative;
    width: 100%;
    border-radius: var(--ploting-bdr-radius-one);
    z-index: -2;
}

.about-three-project-complete {
    position: absolute;
    top: 298px;
    right: -70px;
    background-color: var(--ploting-base);
    border-radius: var(--ploting-bdr-radius-one);
    text-align: center;
    width: 265px;
    height: 265px;
    padding: 32px 30px 31px;
}

.about-three-project-complete::before {
    content: "";
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    background-color: var(--ploting-white);
    border-radius: var(--ploting-bdr-radius-two);
    z-index: -1;
}

.about-three-count {
    position: relative;
    display: flex;
    justify-content: center;
}

.about-three-count .count-text {
    font-size: 90px;
    font-weight: 800;
    line-height: 80px;
    color: var(--ploting-white);
}

.about-three-count span {
    font-size: 40px;
    font-weight: 600;
    line-height: 65px;
    color: var(--ploting-white);
    position: relative;
    top: -12px;
}

.about-three-count-text {
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    color: var(--ploting-white);
    margin-top: 12px;
}

.about-three-points {
    position: relative;
    display: block;
    margin-top: 17px;
    margin-bottom: 17px;
}

.about-three-points li {
    position: relative;
    display: flex;
    align-items: center;
}

.about-three-points li+li {
    margin-top: 5px;
}

.about-three-points li .icon {
    position: relative;
    display: inline-block;
}

.about-three-points li .icon span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    font-size: 9px;
    color: var(--ploting-white);
    background-color: var(--ploting-base);
    border-radius: 50%;
}


.about-three-points li .about-text {
    margin-left: 15px;
}

.about-three-points li .about-text p {
    color: var(--ploting-black);
    font-size: 16px;
    font-weight: 500;
}

.about-three-btn-and-contact {
    position: relative;
    display: block;
    align-items: center;
    margin-top: 30px;
}

.about-three-btn-box {
    position: relative;
    display: flex;
}

.showdo-box-three {
    position: relative;
    padding: 30px 30px 20px 50px;
    background: var(--ploting-blue);
    margin-bottom: 25px;
    border-radius: 0 var(--ploting-bdr-radius-two) var(--ploting-bdr-radius-two) 0;
}

.showdo-box-three::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 10px;
    left: 0;
    top: 0;
    background: var(--ploting-base);
}

.showdo-box-three blockquote {
    font-size: 20px;
    font-weight: 500;
    font-style: italic;
    color: var(--ploting-white);
}

/* -- About Four -- */

.about-four {
    display: block;
    padding: 45px 0 180px;
    z-index: 1;
}

.about-four-left {
    position: relative;
    display: block;
    margin-left: 90px;
    margin-top: 0;
}

.about-four-img {
    position: relative;
    display: block;
    border-radius: var(--ploting-bdr-radius-one);
}

.about-four-img-two {
    position: absolute;
    left: -90px;
    bottom: -60px;
}

.about-four-img-two>img {
    border-radius: var(--ploting-bdr-radius-one);
}

.about-four-img-two::before {
    content: "";
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    background-color: var(--ploting-white);
    border-radius: var(--ploting-bdr-radius-two);
    z-index: -1;
}

.about-four-img>img {
    position: relative;
    width: 100%;
    border-radius: var(--ploting-bdr-radius-one);
    z-index: -2;
}

.about-four-project-complete {
    position: absolute;
    top: 298px;
    right: -70px;
    background-color: var(--ploting-base);
    border-radius: var(--ploting-bdr-radius-one);
    text-align: center;
    width: 265px;
    height: 265px;
    padding: 32px 30px 31px;
}

.about-four-project-complete::before {
    content: "";
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    background-color: var(--ploting-white);
    border-radius: var(--ploting-bdr-radius-two);
    z-index: -1;
}

.about-four-count {
    position: relative;
    display: flex;
    justify-content: center;
}

.about-four-count .count-text {
    font-size: 90px;
    font-weight: 800;
    line-height: 80px;
    color: var(--ploting-white);
}

.about-four-count span {
    font-size: 40px;
    font-weight: 600;
    line-height: 65px;
    color: var(--ploting-white);
    position: relative;
    top: -12px;
}

.about-four-count-text {
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    color: var(--ploting-white);
    margin-top: 12px;
}

.about-four-points {
    position: relative;
    display: block;
    margin-top: 17px;
    margin-bottom: 17px;
}

.about-four-points li {
    position: relative;
    display: flex;
    align-items: center;
}

.about-four-points li+li {
    margin-top: 5px;
}

.about-four-points li .icon {
    position: relative;
    display: inline-block;
}

.about-four-points li .icon span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    font-size: 9px;
    color: var(--ploting-white);
    background-color: var(--ploting-base);
    border-radius: 50%;
}


.about-four-points li .about-text {
    margin-left: 15px;
}

.about-four-points li .about-text p {
    color: var(--ploting-black);
    font-size: 16px;
    font-weight: 500;
}

.about-four-btn-and-contact {
    position: relative;
    display: block;
    align-items: center;
    margin-top: 30px;
}

.about-four-btn-box {
    position: relative;
    display: flex;
}

/*-------------------------------------------------------------- 
# 11. FAQ
--------------------------------------------------------------*/
.faq-section {
    position: relative;
}

.faq-section .sec-con-title {
    margin-bottom: 40px;
}

/* accrodion css */

.accordion li {
    list-style: none;
    position: relative;
    z-index: 1;
    background: var(--ploting-light-ash);
    margin-bottom: 27px;
    border-radius: var(--ploting-bdr-radius-one);
}

.accordion li a {
    display: block;
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    color: inherit;
    padding: 11px 35px 11px;
    text-decoration: none;
    margin-bottom: 11px;
}

.accordion a.active {
    background: var(--ploting-base);
    color: var(--ploting-white);
    border-radius: var(--ploting-bdr-radius-one);
}

.accordion li p {
    display: none;
    font-size: 16px;
    line-height: 26px;
    color: var(--ploting-gray-three);
    padding: 0 38px 17px;
    margin: 0;
    width: 91%;
}

.accordion a:before {
    width: 2px;
    height: 16px;
    background: var(--ploting-base);
    position: absolute;
    right: 37px;
    content: " ";
    top: 15px;
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}

.accordion a:after {
    width: 16px;
    height: 2px;
    background: var(--ploting-base);
    position: absolute;
    right: 30px;
    content: " ";
    top: 22px;
    transition: all 0.2s ease-in-out;
}

.accordion a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: var(--ploting-white);
}

.accordion a.active:before {
    display: none;
}

.accordion a.active {
    color: var(--ploting-white);
}

/* FAQ pricing box */

.faq-section .offer-box {
    background: var(--ploting-light-ash);
    padding: 40px;
    position: relative;
    border-radius: var(--ploting-bdr-radius-one);
    z-index: 1;
    margin-bottom: 55px;
}

.faq-section .offer-box::before {
    position: absolute;
    content: "";
    height: 0%;
    width: 100%;
    background: var(--ploting-base);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(2deg);
    border-radius: var(--ploting-bdr-radius-one);
    z-index: -1;
    transition: all 500ms ease;
}

.faq-section .offer-box:hover::before {
    height: 104%;
}

.faq-section .offer-info {
    display: flex;
    justify-content: space-between;
    margin: 0 8px 0px 67px;
}

.faq-section .offer-year h4 {
    font-size: 16px;
    color: var(--ploting-base);
    font-weight: 400;
    border: 1px solid rgba(var(--ploting-base-rgb), 0.251);
    padding: 6px 16px;
    border-radius: var(--ploting-bdr-radius-one);
    transition: .5s;
}

.faq-section .offer-box:hover .offer-year h4 {
    background: var(--ploting-white);
}

.faq-section .offer-rate h2 {
    font-size: 30px;
    color: var(--ploting-blue);
    font-weight: 700;
    line-height: 24px;
    transition: .5s;
}

.faq-section .offer-box:hover .offer-rate h2 {
    color: var(--ploting-white);
}

.faq-section.offer-rate h2 span {
    font-size: 16px;
}

.faq-section .offer-icon {
    float: left;
    margin-top: 27px;
    margin-right: 28px;
}

.faq-section .offer-icon i {
    background: var(--ploting-base);
    height: 38px;
    width: 38px;
    display: inline-block;
    line-height: 38px;
    text-align: center;
    color: var(--ploting-white);
    font-size: 20px;
    border-radius: var(--ploting-bdr-radius-two);
    transition: .5s;
}

.faq-section .offer-box:hover .offer-icon i {
    background: var(--ploting-white);
    color: var(--ploting-base);
}

.faq-section .offer-content {
    overflow: hidden;
}

.faq-section .offer-content h4 {
    font-size: 30px;
    line-height: 55px;
    color: var(--ploting-black);
    font-weight: 700;
    transition: .1s;
}

.faq-section .offer-content h4 a:hover,
.faq-section .offer-box:hover .offer-content h4 {
    color: var(--ploting-white);
}

.faq-section .offer-content p {
    font-size: 16px;
    line-height: 24px;
    color: var(--ploting-gray-three);
    font-weight: 400;
    transition: .5s;
}

.faq-section .offer-box:hover .offer-content p {
    color: var(--ploting-white);
}

.offer-value {
    position: absolute;
    top: -20px;
    left: 40px;
}

.offer-value h5 {
    font-size: 16px;
    color: var(--ploting-white);
    font-weight: 400;
    background: var(--ploting-blue);
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--ploting-bdr-radius-one);
    transition: .5s;
}

.offer-box:hover .offer-value h5 {
    background: var(--ploting-white);
    color: var(--ploting-base);
}

/* FAQ One */

.faq-one {
    padding: 140px 0 85px;
    background: var(--ploting-not-gray);
}

/* FAQ Two */

.faq-two {
    padding: 114px 0 80px;
    background: var(--ploting-not-gray);
}

/* FAQ Three */
.faq-three {
    padding: 120px 0;
    background: var(--ploting-not-gray);
}

.faq-three-img-box {
    position: relative;
    margin-left: 180px;
}

.faq-three-img-box img {
    border-radius: var(--ploting-bdr-radius-two);
}

.faq-three-img-text {
    position: absolute;
    box-shadow: 6px 6px 50px 5px rgba(var(--ploting-black-rgb), 0.12);
    border-radius: var(--ploting-bdr-radius-one);
    padding: 25px 25px 25px 40px;
    width: 340px;
    display: flex;
    align-items: center;
    background: var(--ploting-base);
    left: -80px;
    bottom: 90px;
    color: var(--ploting-white);
}

.faq-three-img-text h6 {
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 500;
}

.faq-three-img-text h3 {
    position: absolute;
    width: 70px;
    height: 70px;
    left: -35px;
    top: 10px;
    background: var(--ploting-blue);
    text-align: center;
    line-height: 55px;
    border-radius: 35px;
    border: 5px solid var(--ploting-base);
    color: var(--ploting-white);
    font-weight: 600;
}


/*-------------------------------------------------------------- 
# 12. Fancy
--------------------------------------------------------------*/

.fancy-section {
    position: relative;
}

/* Fancy One */

.fancy-one {
    background: var(--ploting-not-gray);
    padding: 120px 0 0;
}

.fancy-box {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ploting-white);
}

.fancy-btn {
    margin-top: 10px;
}

.fancy-btn-link {
    text-transform: capitalize;
    color: var(--ploting-base);
    font-size: 16px;
    font-weight: 500;
}

.fancy-btn-link:hover {
    color: var(--ploting-blue);
}

.fancy-one-btn {
    position: relative;
    display: block;
    align-items: center;
    margin-top: 30px;
}

.fancy-box:last-child {
    border-bottom: 0;
}

.fancy-box .fancy-media {
    display: flex;
}

.fancy-box .fancy-box-icon i {
    color: var(--ploting-base);
    margin-left: 15px;
}

.fancy-box .fancy-box-icon i::before {
    font-size: 60px;
}

.fancy-box .fancy-box-icon {
    margin-right: 30px;
}

.fancy-box .fancy-box-info .fancy-box-title {
    margin-bottom: 15px;
    font-size: 24px;
    color: var(--ploting-black);
    text-transform: capitalize;
    font-weight: 600;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}

.fancy-box .fancy-box-description {
    margin-bottom: 5px;
    font-size: 16px;
}

.fancy-img-box {
    position: relative;
}

.fancy-img-box img {
    border-radius: var(--ploting-bdr-radius-two);
}

.fancy-img-text {
    position: absolute;
    box-shadow: 6px 6px 50px 5px rgba(var(--ploting-black-rgb), 0.12);
    border-radius: var(--ploting-bdr-radius-one);
    padding: 25px 25px 25px 40px;
    width: 340px;
    display: flex;
    align-items: center;
    background: var(--ploting-base);
    right: 120px;
    bottom: 87px;
    color: var(--ploting-white);
}

.fancy-img-text h6 {
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 500;
}

.fancy-img-text h3 {
    position: absolute;
    width: 70px;
    height: 70px;
    left: -35px;
    top: 10px;
    background: var(--ploting-blue);
    text-align: center;
    line-height: 55px;
    border-radius: 35px;
    border: 5px solid var(--ploting-base);
    color: var(--ploting-white);
    font-weight: 600;

}

/*-------------------------------------------------------------- 
# 13. Project 
--------------------------------------------------------------*/
.project-section {
    position: relative;
}

.project-inner {
    padding: 120px 0 90px;
}

.project-inner-two {
    padding: 114px 0 90px;
}

.project-with-color-bg {
    background: var(--ploting-not-gray);
}

/* Project One */

.project-one {
    padding: 114px 0 119px;
}

.project-section .sec-con-title h2 {
    margin-bottom: 75px;
}

.project-section .item {
    transition: .5s;
}

.project-section .offer-top-layout {
    position: absolute;
    left: -36px;
    top: 0;
}

.project-section .offer-bottomlayer {
    position: absolute;
    right: 0;
    bottom: 0;
}

.project-section .case-box {
    transition: .5s;
    position: relative;
    border-radius: var(--ploting-bdr-radius-two);
    overflow: hidden;
}

.project-section .case-box .overlay-image {
    position: relative;
}

.project-section .case-box .overlay-image:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 38%;
    background-image: linear-gradient(to top, var(--ploting-black) 0%, var(--ploting-black) 100%);
    transition: 0.5s;
}

.project-section .overlay:hover img {
    opacity: 0.4;
}

.project-section .case-box .content {
    background: var(--ploting-base);
    position: absolute;
    padding: 20px;
    margin-top: -175px;
    border-radius: 0 10px 10px 0;
    transition: .5s;
}

.project-section .case-box:hover .content {
    background: var(--ploting-gray-three);
}

.project-section .case-box .content h5 {
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: 600;
}

.project-section .case-box .content p,
.project-section .case-box .content h5 a {
    color: var(--ploting-white);
}

.project-section .case-box .content h5 a:hover {
    color: var(--ploting-base);
}

.project-section .case-box .content .text-size-18 {
    display: inline-block;
    margin-bottom: 12px;
    line-height: 22px;
}

.project-section .case-box>span {
    position: absolute;
    top: 30px;
    left: 15px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: var(--ploting-bdr-radius-two);
    background-color: var(--ploting-blue);
    padding: 2px 18px;
    text-align: center;
    display: inline-block;
    color: var(--ploting-white);
}

.project-section .case-box .circle {
    background: var(--ploting-base);
    border-radius: 100px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    margin-left: -2px;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    position: absolute;
    right: 20px;
    top: 20px;
}

.project-section .case-box .circle:hover {
    transform: translateY(-5px);
}

.project-section .case-box1 .circle {
    right: -50px;
}

.project-section .case-box:hover .circle {
    background-image: linear-gradient(to right, var(--ploting-white) 0%, var(--ploting-white) 51%, var(--ploting-white) 100%);
}

.project-section .case-box:hover .circle:before {
    color: var(--ploting-base);
}

.project-section .case-box .circle:before {
    font-size: 18px;
    padding-top: 2px;
    font-family: 'FontAwesome';
    transition: all 0.3s ease;
    color: var(--ploting-white);
}

/* Project Two */

.project-two {
    padding: 114px 0 0;
}

.project-two .sec-con-title .con-title-text {
    color: var(--ploting-white);
}

.project-two::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--ploting-base);
}

.project-dis-img {
    min-height: 650px;
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    transition: opacity .5s .2s;
    opacity: 1;
}

.project-dis-img-inner {
    overflow: hidden;
    display: flex;
    width: 100%;
}

.project-dis-img-bg {
    display: block;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: 100%;
}

.project-dis-img-item {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 0;
    z-index: 5;
    flex: 1;
    height: 100%;
    transition: 0.5s;
    cursor: pointer;
}

.project-dis-img .project-dis-img-item.active {
    flex: 2;
    transition: 0.5s;
}

.project-dis-img-number {
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    font-family: var(--ploting-font);
    color: var(--ploting-base);
}

.project-dis-img-info {
    position: absolute;
    left: -40px;
    bottom: 130px;
    right: 0;
    display: block;
    opacity: 0;
    transition: all 0.8s ease;
    cursor: text;
}

.project-dis-img .project-dis-img-item.active .project-dis-img-info {
    opacity: 1;
    left: 60px;
    width: 50%;
    transition: all 0.8s ease;
}

.project-dis-img-info .project-dis-img-title {
    margin-bottom: 13px;
}

.project-dis-img-info .project-dis-img-title a {
    margin-bottom: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    padding: 10px 15px;
    font-family: var(--ploting-font);
    text-transform: capitalize;
    color: var(--ploting-black);
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
    background: var(--ploting-white);
    border-radius: var(--ploting-bdr-radius-one);
}

.project-dis-img-info span {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ploting-white);
    position: relative;
    z-index: 2;
    background: var(--ploting-base);
    border-radius: var(--ploting-bdr-radius-one);
}

/* Project Three */

.project-three {
    padding: 114px 0 105px;
}

.project-three-btn {
    margin-top: 30px;
}

.project-three .sec-con-title h2 {
    margin-bottom: 30px;
}

/* Project four */
.project-four {
    padding: 0;
    background: var(--ploting-base);
}

.project-four .sec-con-title .con-title-text {
    color: var(--ploting-white);
}

.project-four .sec-con-title h2 {
    margin-bottom: 30px;
}

.project-four .sec-con-title p {
    padding-right: 25px;
    color: var(--ploting-light-ash);
}

.project-four .project-dis-img .project-dis-img-item.active .project-dis-img-info {
    width: 70%;
}

.project-four-btn.btn-style-two {
    margin-top: 30px;
    background-color: var(--ploting-white);
    color: var(--ploting-base);
}

/* Project Details */

.project-details {
    position: relative;
}

.project-details-with-color-bg {
    background: var(--ploting-not-gray);
    padding: 120px 0 92px;
}

.project-details-no-color-bg {
    padding: 120px 0 93px;
}

.project-showdo-box {
    position: relative;
    padding: 30px 30px 20px 50px;
    background: var(--ploting-blue);
    margin: 30px 0;
    border-radius: var(--ploting-bdr-radius-two) 0 0 var(--ploting-bdr-radius-two);
}

.project-showdo-box::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 10px;
    right: 0;
    top: 0;
    background: var(--ploting-base);
}

.project-showdo-box blockquote {
    font-size: 20px;
    font-weight: 500;
    font-style: italic;
    color: var(--ploting-white);
}

.project-thumb {
    border-radius: var(--ploting-bdr-radius-one);
    overflow: hidden;
}

.project-thumb img {
    width: 100%;
}

.project-details-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
    margin-top: 44px;
    margin-bottom: 18px;
    color: var(--ploting-black);
}

.project-note li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--ploting-gray-three);
    margin-bottom: 10px;
}

.project-note li i {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background-color: var(--ploting-not-gray);
    border-radius: 50%;
    font-size: 20px;
    color: var(--ploting-base);
    margin-right: 15px;
}

.project-info {
    background: var(--ploting-blue);
    padding: 40px 20px;
    border-radius: var(--ploting-bdr-radius-one);
}

.project-info h2 {
    font-size: 30px;
    font-weight: 600;
    color: var(--ploting-white);
    padding-left: 20px;
}

.project-info ul li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--ploting-blue);
    padding: 17px 20px 17px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.project-info ul li p {
    font-weight: 400;
    color: var(--ploting-white);
}

.project-info ul li strong {
    font-size: 18px;
    color: var(--ploting-white);
}

.project-rating a i {
    color: var(--ploting-base);
}

.project-info ul li:hover i {
    color: var(--ploting-white);
}

.project-info ul li:hover {
    background: var(--ploting-base);
    border-radius: var(--ploting-bdr-radius-one);
}

.project-one-img-2 {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--ploting-bdr-radius-one);
}

.project-one-img-2 img {
    width: 100%;
    border-radius: var(--ploting-bdr-radius-one);
}

.project-one-shape-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 140px;
    height: 140px;
    background-color: var(--ploting-base);
    border-radius: 0 50% 0 0;
}

.project-one-video-link {
    position: absolute;
    bottom: 42px;
    left: 40px;
    z-index: 3;
}

.project-one-video-icon {
    position: relative;
    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;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 13px;
    color: var(--ploting-white);
    border-radius: 50%;
    background-color: var(--ploting-base);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.project-one-video-icon:hover {
    background-color: var(--ploting-blue);
    color: var(--ploting-white);
}

.project-one-video-icon:before {
    position: absolute;
    top: -9px;
    left: -9px;
    right: -9px;
    bottom: -9px;
    content: "";
    border-radius: 50%;
    border: 1px solid rgba(var(--ploting-white-rgb), .31);
    z-index: 1;
}

.project-one-video-link .ripple,
.project-one-video-icon .ripple:before,
.project-one-video-icon .ripple:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -o-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -webkit-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
}

.project-one-video-icon .ripple:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    content: "";
    position: absolute;
}

.project-one-video-icon .ripple:after {
    content: "";
    position: absolute;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

/*-------------------------------------------------------------- 
# 14. Testimonial 
--------------------------------------------------------------*/
.testimonial-section {
    position: relative;
}

.testimonial-with-color-bg {
    padding: 114px 0 121px;
    background: var(--ploting-not-gray);
}

.testimonial-no-color {
    padding: 114px 0 121px;
}

/* Testimonial One*/

.testimonial-one {
    padding: 114px 0 121px;
    background: var(--ploting-not-gray);
}

.testimonial-section .sec-con-title h2 {
    margin-bottom: 40px;
}

.testimonial-section .client-box-img {
    position: absolute;
    top: 5px;
    width: 150px;
    height: 150px;
}

.testimonial-section .client-box-img img {
    z-index: 9;
    clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
}

.testimonial-section .clients-name {
    color: var(--ploting-gray);
}

.testimonial-section .clients-name .testimonial-text {
    margin-top: 20px;
    margin-bottom: 30px;
}

.owl-carousel.owl-drag .owl-item {
    position: relative;
}

.testimonial-section .business-client-box {
    margin: 80px 0 30px 0;
}

.testimonial-section .business-client-box .client-info {
    position: absolute;
    text-align: left;
    background: var(--ploting-base);
    padding: 20px 30px;
    bottom: 0;
    left: 0px;
    border-radius: var(--ploting-bdr-radius-one);
    color: var(--ploting-white);
}

.testimonial-section .business-client-box .client-info h5 {
    font-weight: 800;
}

.testimonial-section .business-client-box .fa-quote-right {
    position: absolute;
    right: 15px;
    top: -90px;
    font-size: 70px;
    color: rgba(var(--ploting-base-rgb), 0.8);
}

.testimonial-section .business-client-box .client-position {
    font-size: 14px;
    color: var(--ploting-white);
}

/* Testimonial Two */

.testimonial-two {
    padding: 120px 0 120px;
    background: var(--ploting-not-gray);
}

.testimonial-img-box-two {
    position: relative;
    border-radius: var(--ploting-bdr-radius-two);
}

.testimonial-img-box-two img {
    border-radius: var(--ploting-bdr-radius-two);
}

.testimonial-img-text {
    position: absolute;
    box-shadow: 6px 6px 50px 5px rgba(var(--ploting-black-rgb), 0.12);
    border-radius: var(--ploting-bdr-radius-one);
    padding: 30px 30px 30px 40px;
    width: 400px;
    display: flex;
    align-items: center;
    background: var(--ploting-base);
    right: 75px;
    bottom: 87px;
    color: var(--ploting-white);
    overflow: hidden;
}

.testimonial-img-text::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 100%;
    left: 0;
    background: var(--ploting-blue);
}

.testimonial-img-text h6 {
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 500;
}

/* Testimonial Three*/

.testimonial-three {
    padding: 114px 0 120px;
    background: var(--ploting-not-gray);
}

.testimonial-img-three {
    margin-right: 71px;
}

.testimonial-img-three img {
    border-radius: var(--ploting-bdr-radius-two);
}

.testimonial-icon-three {
    font-size: 60px;
    line-height: 1;
    color: var(--ploting-base);
    margin-bottom: 25px;
    margin-left: 2px;
}

.testimonial-content-three>p {
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 32px;
}

.testimonial-avatar-three {
    display: flex;
    align-items: center;
}

.testimonial-avatar-three .avatar-thumb {
    width: 80px;
    flex: 0 0 auto;
    margin-right: 30px;
}

.testimonial-avatar-three .avatar-thumb img {
    border-radius: 50%;
}

.testimonial-avatar-three .avatar-content .title {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 25px;
}

.testimonial-avatar-three .avatar-content p {
    margin-bottom: 0;
    color: var(--ploting-base);
}

/* Testimonial Four */

.testimonial-four {
    padding: 114px 0 120px;
    background: var(--ploting-not-gray);
}

.testimonial-item-four {
    background: var(--ploting-white);
    border-radius: var(--ploting-bdr-radius-three);
    padding: 40px;
    display: flex !important;
    align-items: flex-start;
}

.testimonial-avatar-four {
    width: 150px;
    flex: 0 0 auto;
    margin-right: 50px;
}

.testimonial-avatar-four img {
    border-radius: var(--ploting-bdr-radius-one);
}

.testimonial-content-four .content-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.testimonial-content-four .content-top .icon {
    font-size: 40px;
    color: var(--ploting-base);
    line-height: 1;
}

.testimonial-content-four .content-top .rating {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: var(--ploting-base);
    gap: 5px;
}

.testimonial-content-four p {
    margin-bottom: 23px;
    font-style: italic;
    font-size: 20px;
    position: relative;
    padding-left: 10px;
}

.testimonial-content-four p::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 90%;
    background: var(--ploting-base);
}

.testimonial-content-four .content-bottom .title {
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 10px;
}

.testimonial-content-four .content-bottom span {
    display: block;
    color: var(--ploting-base);
    line-height: 1;
}


/*-------------------------------------------------------------- 
# 15. Team 
--------------------------------------------------------------*/
.teams-section {
    position: relative;
}

/* Team One */
.team-one {
    padding: 114px 0 90px;
    background: var(--ploting-not-gray);
}

.team-one .sec-con-title h2 {
    margin-bottom: 45px;
}

.team-item {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.team-thumb {
    border-radius: var(--ploting-bdr-radius-one);
    position: relative;
    margin-left: 40px;
}

.team-thumb img {
    border-radius: var(--ploting-bdr-radius-one);
    height: 435px;
    object-fit: cover;
    width: 100%;
}

.team-social {
    position: absolute;
    left: 0;
    top: 16px;
    transition: .4s ease-in-out;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

.team-item:hover .team-social {
    left: -45px;
    visibility: visible;
    opacity: 1;
}

.team-social .list-wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    background: var(--ploting-base);
    padding: 15px 7px;
    gap: 6px;
    border-radius: 5px 0 0 5px;
}

.team-social .list-wrap li a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--ploting-white);
    border-radius: 50%;
}

.team-social .list-wrap li a:hover {
    color: var(--ploting-black);
}

.team-content {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    background: var(--ploting-base);
    color: var(--ploting-white);
    border-radius: 10px 0 0 10px;
    padding: 32px 20px;
    transition: .3s ease-in-out;
}

.team-item:hover .team-content {
    background: var(--ploting-gray-three);
}

.team-content .title {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 8px;
}

.team-content .title a {
    color: var(--ploting-white);
}

.team-content .title a:hover {
    color: var(--ploting-base);
}

.team-content span {
    font-weight: 400;
    font-size: 16px;
    display: block;
    font-family: var(--ploting-font);
    color: var(--ploting-white);
}

/* Team Two */
.team-two {
    padding: 114px 0 90px;
    background: var(--ploting-not-gray);
}

.team-two .sec-con-title h2 {
    margin-bottom: 45px;
}

.team-item-two {
    position: relative;
    margin-bottom: 30px;
}

.team-thumb-two {
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 20px 0;
}

.team-thumb-two::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: rgba(var(--ploting-black-rgb), 0.4);
    opacity: 0;
    transition: .3s linear;
    pointer-events: none;
}

.team-item-two:hover .team-thumb-two::before {
    opacity: 1;
    width: 100%;
}

.team-social-two .list-wrap {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100px);
    transition: .3s;
    background: var(--ploting-base);
    border-radius: 0 10px 10px 0;
}

.team-item-two:hover .team-social-two .list-wrap {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.team-social-two .list-wrap a {
    width: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: var(--ploting-white);
}

.team-social-two .list-wrap a:hover {
    color: var(--ploting-black);
}

.team-content-two {
    width: 270px;
    box-shadow: 0px 4px 46px rgba(var(--ploting-black-rgb), 0.18);
    border-radius: 0 10px 20px 20px;
    text-align: center;
    padding: 26px 20px;
    position: relative;
    z-index: 2;
    margin-top: -52px;
    transition: .3s linear;
    background: var(--ploting-white);
}

.team-item-two:hover .team-content-two {
    background: var(--ploting-gray-three);
}

.team-content-two .title {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 12px;
}

.team-content-two .title a:hover {
    color: var(--ploting-white);
}

.team-content-two span {
    display: block;
    color: var(--ploting-gray);
    line-height: 1;
    transition: .3s linear;
}

.team-item-two:hover .team-content-two span,
.team-item-two:hover .team-content-two .title {
    color: var(--ploting-white);
}

/* Team Three */
.team-three {
    padding: 120px 0 90px;
    background: var(--ploting-not-gray);
}

.team-three .sec-con-title h2 {
    margin-bottom: 20px;
}

.team-three .sec-con-title p {
    margin-bottom: 30px;
}

.team-item-three {
    margin-bottom: 30px;
}

.team-thumb-three {
    position: relative;
    border-radius: var(--ploting-bdr-radius-one);
    overflow: hidden;
}

.team-thumb-three::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--ploting-black-rgb), 0.4);
    transition: .3s linear;
    pointer-events: none;
    opacity: 0;
}

.team-item-three:hover .team-thumb-three::before {
    opacity: 1;
}

.team-social-three .list-wrap {
    display: flex;
    flex-direction: column;
    background: var(--ploting-base);
    position: absolute;
    top: 0;
    right: 0;
    padding: 18px 8px;
    border-radius: 0 4px 0 4px;
    gap: 6px;
    border: 7px solid var(--ploting-white);
    border-top: none;
    border-right: none;
    opacity: 0;
    transform: translateX(100px);
    visibility: hidden;
    transition: .3s linear;
}

.team-item-three:hover .team-social-three .list-wrap {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

.team-social-three .list-wrap li a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ploting-white);
    font-size: 14px;
    color: var(--ploting-gray);
    border-radius: 50%;
}

.team-social-three .list-wrap li a:hover {
    color: var(--ploting-base);
}

.team-content-three {
    box-shadow: 0px 4px 46px rgba(var(--ploting-black-rgb), 0.18);
    border-radius: 4px;
    padding: 25px 25px;
    text-align: center;
    background: var(--ploting-white);
    border: 1px solid var(--ploting-white);
    margin: -50px 35px 0;
    position: relative;
    z-index: 1;
    transition: .3s linear;
}

.team-item-three:hover .team-content-three {
    background: var(--ploting-base);
}

.team-item-three .team-content-three a:hover {
    color: var(--ploting-white);
}

.team-content-three .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.team-content-three span {
    display: block;
    font-family: var(--ploting-font);
    line-height: 1;
    transition: .3s linear;
}

.team-item-three:hover .team-content-three span,
.team-item-three:hover .team-content-three .title {
    color: var(--ploting-white);
}

/* Team four */
.team-four {
    padding: 120px 0 90px;
    background: var(--ploting-not-gray);
}

.team-four .sec-con-title h2 {
    margin-bottom: 20px;
}

.team-four .sec-con-title p {
    margin-bottom: 25px;
}

/* Team Details */
.team-details {
    position: relative;
    display: block;
    padding: 120px 0 150px;
    z-index: 1;
}

.team-img-box {
    position: relative;
    display: block;
}

.team-member-img {
    position: relative;
    display: block;
    border-radius: 50%;
}

.team-member-img::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 10px solid var(--ploting-blue);
    border-radius: 50%;
}

.team-member-img img {
    width: 100%;
    border-radius: 50%;
}

.team-member-info {
    position: absolute;
    bottom: -30px;
    left: 25%;
    max-width: 222px;
    width: 100%;
    background-color: var(--ploting-white);
    box-shadow: 0px 4px 20px 0px rgba(var(--ploting-gray-rgb), 0.05);
    padding: 20px 30px 21px;
    border-radius: var(--ploting-bdr-radius-two);
    overflow: hidden;
}

.team-member-info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    background-color: var(--ploting-blue);
}

.team-member-info h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: var(--ploting-black);
}

.team-member-info p {
    font-size: 16px;
    line-height: 26px;
    margin-top: 7px;
}

.team-member-social {
    position: absolute;
    left: 0;
    bottom: 30%;
}

.team-member-social-icon {
    position: relative;
    display: block;
    background-color: var(--ploting-base);
    padding: 00px 0px 0px;
    border-radius: var(--ploting-bdr-radius-one);
}

.team-member-social-icon li {
    position: relative;
    display: block;
}

.team-member-social-icon li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--ploting-white);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    height: 45px;
    width: 50px;
    border-radius: var(--ploting-bdr-radius-one);
    overflow: hidden;
    z-index: 1;
}

.team-member-social-icon li a:hover {
    color: var(--ploting-black);
}

.team-details-box {
    position: relative;
    display: block;
    margin-top: 26px;
}

.team-details-title {
    font-size: 50px;
    font-weight: 700;
    line-height: 60px;
}

.team-details-text {
    margin-top: 30px;
    margin-bottom: 24px;
}

.team-details-check li {
    position: relative;
    display: flex;
    align-items: center;
}

.team-details-check li+li {
    margin-top: 20px;
}

.team-details-check li .details-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--ploting-white);
    box-shadow: 0px 0px 25px 0px rgba(var(--ploting-gray-rgb), 0.4);
}

.team-details-check li .details-icon span {
    position: relative;
    display: inline-block;
    font-size: 21px;
    color: var(--ploting-white);
}


.team-details-check li .team-check-text {
    margin-left: 17px;
}

.team-contact-details-box {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 34px;
}

.team-contact-details-box li {
    position: relative;
    display: flex;
    align-items: center;
}

.team-contact-details-box li+li {
    margin-top: 9px;
}

.team-contact-details-box li span {
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    margin-right: 15px;
    color: var(--ploting-black);
}

.team-contact-details-box li p {
    font-size: 16px;
    font-weight: 400;
    margin-left: 12px;
}

.team-contact-details-box li p a {
    color: var(--ploting-gray-three);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.team-contact-details-box li p a:hover {
    color: var(--ploting-base);
}

/*-------------------------------------------------------------- 
# 16. Counter 
--------------------------------------------------------------*/
.counter-section {
    position: relative;
}

/* Counter One */
.counter-one {
    padding: 114px 0 120px;
}

.coun-skillbar {
    position: relative;
    background: var(--ploting-not-gray);
    display: block;
    margin-top: 45px;
    width: 80%;
    height: 10px;
    transition: 7s linear;
    border-radius: 5px;
}

.coun-skillbar-title {
    position: absolute;
    top: -25px;
    left: 0;
    font-weight: bold;
    font-size: 14px;
    z-index: 1;
}

.coun-skillbar-bar {
    background: var(--ploting-base);
    height: 10px;
    width: 0px;
    float: left;
    position: relative;
    border-radius: 5px;
}

.coun-skill-bar-percent {
    color: var(--ploting-black);
    z-index: 1;
    float: left;
    margin-top: -25px;
}

.offer-items-box {
    background: var(--ploting-blue);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 25px 20px;
    border-radius: var(--ploting-bdr-radius-two);
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 10px 0 30px;
    text-align: center;
}

.offer-items-box::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ploting-base);
    width: 0;
    transform: translateY(100%);
    z-index: -1;
    transition: .5s;
    border-radius: var(--ploting-bdr-radius-two);
}

.offer-items-box:hover::before {
    width: 100%;
    transform: translateY(0);
}

.offer-icon-thumb i {
    transition: .5s;
    color: var(--ploting-base);
    font-size: 34px;
}

.offer-items-box:hover .offer-icon-thumb i {
    filter: brightness(0)invert(1);
}

.offer-content h4 {
    font-size: 24px;
    line-height: 24px;
    color: var(--ploting-white);
    font-weight: 600;
    padding: 18px 0 14px;
    transition: .5s;
}

.offer-items-box:hover .offer-content h4 {
    color: var(--ploting-white);
}

.offer-content p {
    font-size: 16px;
    line-height: 24px;
    color: var(--ploting-white);
    font-weight: 400;
    transition: .5s;
}

.offer-items-box:hover .offer-content p {
    color: var(--ploting-white);
}

.offer-sp-effect {
    box-shadow: 0px 0px 0px 15px var(--ploting-white);
}

.offer-thumb {
    margin-left: -100px;
    margin-top: 60px;
    border-radius: var(--ploting-bdr-radius-two);
    overflow: hidden;
}

.offer-thumb img {
    width: 100%;
}

/* Counter Two */
.counter-two {
    padding: 120px 0 120px;
}

.counter-two-box {
    padding: 0 0 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--ploting-not-gray);
}

.counter-two-box:last-child {
    border-bottom: 0;
}

.counter-two-box .counter-two-num-prefix {
    display: flex;
    justify-content: center;
}

.counter-two-box .counter-two-title {
    font-size: 24px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 5px;
    line-height: 1;
    color: var(--ploting-black);
}

.counter-two-box .timer {
    color: var(--ploting-white);
    font-size: 48px;
    font-weight: 600;
    line-height: 56px;
}

.counter-two-box .counter-two-prefix {
    color: var(--ploting-white);
    font-size: 48px;
    font-weight: 600;
    line-height: 56px;
}

.counter-two-box .counter-two-inner {
    display: inline-flex;
    align-items: center;
}

.counter-two-box .counter-two-prefix-info {
    flex: 1;
    margin-left: 15px;
}

.counter-two-box .counter-two-media {
    text-align: center;
}

.counter-two-box .counter-two-media i {
    line-height: 72px;
    color: var(--ploting-base);
}

.counter-two-box .counter-two-media i::before {
    font-size: 56px;
    margin-left: 0;
}

.counter-two-box .counter-two-prefix-info h5 {
    font-size: 56px;
    line-height: 56px;
    display: inline-block;
    font-weight: 600;
    color: var(--ploting-blue);
}

.counter-two-box .counter-two-prefix-info .counter-two-prefix {
    font-size: 56px;
    line-height: 56px;
    font-weight: 600;
    color: var(--ploting-blue);
}

.counter-two-box .counter-two-description {
    margin-bottom: 0;
}

.counter-img-box-two {
    position: relative;
    border-radius: var(--ploting-bdr-radius-two);
    overflow: hidden;
}

.counter-one-img-2 {
    position: relative;
    display: block;
    width: 320px;
    overflow: hidden;
    border-radius: var(--ploting-bdr-radius-one);
}

.counter-one-img-2 img {
    width: 100%;
    border-radius: var(--ploting-bdr-radius-one);
}

.counter-one-shape-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 140px;
    height: 140px;
    background-color: var(--ploting-base);
    border-radius: 0 50% 0 0;
}

.counter-one-video-link {
    position: absolute;
    bottom: 42px;
    left: 40px;
    z-index: 3;
}

.counter-one-video-icon {
    position: relative;
    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;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 13px;
    color: var(--ploting-white);
    border-radius: 50%;
    background-color: var(--ploting-base);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.counter-one-video-icon:hover {
    background-color: var(--ploting-blue);
    color: var(--ploting-white);
}

.counter-one-video-icon:before {
    position: absolute;
    top: -9px;
    left: -9px;
    right: -9px;
    bottom: -9px;
    content: "";
    border-radius: 50%;
    border: 1px solid rgba(var(--ploting-white-rgb), .31);
    z-index: 1;
}

.counter-one-video-link .ripple,
.counter-one-video-icon .ripple:before,
.counter-one-video-icon .ripple:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -o-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    box-shadow: 0 0 0 0 rgba(var(--ploting-white-rgb), 0.6);
    -webkit-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
}

.counter-one-video-icon .ripple:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    content: "";
    position: absolute;
}

.counter-one-video-icon .ripple:after {
    content: "";
    position: absolute;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

/* Counter Three */
.counter-three {
    padding: 114px 0 120px;
}

/*-------------------------------------------------------------- 
# 17. Pricing  
--------------------------------------------------------------*/
.pricing-section {
    position: relative;
}

.pricing-with-color-bg {
    background: var(--ploting-not-gray);
    padding: 114px 0 64px;
}

.pricing-no-color-bg {
    padding: 114px 0 64px;
}

/* Pricing One */

.pricing-one {
    padding: 114px 0 126px;
}

.pricing-section .sec-con-title h2 {
    margin-bottom: 60px;
}

.business-price-box {
    position: relative;
    padding: 30px 25px;
    transition: linear all 600ms;
    -webkit-transition: linear all 600ms;
    -moz-transition: linear all 600ms;
    -ms-transition: linear all 600ms;
    -o-transition: linear all 600ms;
    border-radius: var(--ploting-bdr-radius-two);
    margin: 0 30px;
}

.business-price-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ploting-base);
    transform: rotate(2deg);
    border-radius: var(--ploting-bdr-radius-two);
    transition: .5s;
}

.business-price-box:hover {
    border-radius: var(--ploting-bdr-radius-two);
    background: var(--ploting-white);
}

.business-price-box:hover::before {
    transform: rotate(0deg);
}

.business-price-box:hover .font-weight-bold {
    color: var(--ploting-gray);
}

.business-price-features p {
    font-size: 16px;
    color: var(--ploting-white);
    margin-bottom: 8px;
}

.business-price-features p i {
    margin-right: 5px;
}

.business-plan-price h1 {
    font-weight: 700;
    color: var(--ploting-white);
}

.business-plan-price h6 {
    font-size: 14px;
}

.business-plan-price p {
    color: var(--ploting-light-ash);
}

.plan-price {
    position: absolute;
    display: block;
    top: -30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px;
    padding: 15px;
    background: var(--ploting-blue);
    border-radius: var(--ploting-bdr-radius-one);
    border: 5px solid var(--ploting-white);
}

.plan-price h5 {
    font-weight: 700;
    color: var(--ploting-white);
}

.business-price-box a {
    background: none;
    border: 1px solid var(--ploting-white);
}

.pricing-text {
    margin-bottom: 57px !important;
}

/* Pricing Two */

.pricing-two {
    padding: 130px 0 125px;
}

.pricing-two .sec-con-title h2 {
    margin-bottom: 30px;
}

.pricing-two-btn {
    margin-top: 30px;
}

/* Pricing three */

.pricing-three {
    padding: 114px 0 64px;
}

.pricing-section .offer-box {
    background: var(--ploting-light-ash);
    padding: 40px;
    position: relative;
    border-radius: var(--ploting-bdr-radius-one);
    z-index: 1;
    margin-bottom: 55px;
}

.pricing-section .offer-box::before {
    position: absolute;
    content: "";
    height: 0%;
    width: 100%;
    background: var(--ploting-base);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(2deg);
    border-radius: var(--ploting-bdr-radius-one);
    z-index: -1;
    transition: all 500ms ease;
}

.pricing-section .offer-box:hover::before {
    height: 104%;
}

.pricing-section .offer-info {
    display: flex;
    justify-content: space-between;
    margin: 0 8px 0px 67px;
}

.pricing-section .offer-year h4 {
    font-size: 16px;
    color: var(--ploting-base);
    font-weight: 400;
    border: 1px solid rgba(var(--ploting-base-rgb), 0.251);
    padding: 6px 16px;
    border-radius: var(--ploting-bdr-radius-one);
    transition: .5s;
}

.pricing-section .offer-box:hover .offer-year h4 {
    background: var(--ploting-white);
}

.pricing-section .offer-rate h2 {
    font-size: 30px;
    color: var(--ploting-blue);
    font-weight: 700;
    line-height: 24px;
    transition: .5s;
}

.pricing-section .offer-box:hover .offer-rate h2 {
    color: var(--ploting-white);
}

.pricing-section.offer-rate h2 span {
    font-size: 16px;
}

.pricing-section .offer-icon {
    float: left;
    margin-top: 27px;
    margin-right: 28px;
}

.pricing-section .offer-icon i {
    background: var(--ploting-base);
    height: 38px;
    width: 38px;
    display: inline-block;
    line-height: 38px;
    text-align: center;
    color: var(--ploting-white);
    font-size: 20px;
    border-radius: var(--ploting-bdr-radius-two);
    transition: .5s;
}

.pricing-section .offer-box:hover .offer-icon i {
    background: var(--ploting-white);
    color: var(--ploting-base);
}

.pricing-section .offer-content {
    overflow: hidden;
}

.pricing-section .offer-content h4 {
    font-size: 30px;
    line-height: 55px;
    color: var(--ploting-black);
    font-weight: 700;
    transition: .5s;
}

.pricing-section .offer-content h4 a:hover,
.pricing-section .offer-box:hover .offer-content h4 {
    color: var(--ploting-white);
}

.pricing-section .offer-content ul li {
    font-size: 16px;
    line-height: 24px;
    color: var(--ploting-gray-three);
    font-weight: 400;
    transition: .5s;
    display: inline-block;
    margin-right: 15px
}

.pricing-section .offer-content ul li i {
    padding: 8px;
    background: var(--ploting-base);
    border-radius: var(--ploting-bdr-radius-one);
    color: var(--ploting-white);
    transition: .5s;
}

.pricing-section .offer-box:hover .offer-content ul li {
    color: var(--ploting-white);
}

.pricing-section .offer-box:hover .offer-content ul li i {
    background: var(--ploting-white);
    color: var(--ploting-base);
}

.offer-value {
    position: absolute;
    top: -20px;
    left: 40px;
}

.offer-value h5 {
    font-size: 16px;
    color: var(--ploting-white);
    font-weight: 400;
    background: var(--ploting-blue);
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--ploting-bdr-radius-one);
    transition: .5s;
}

.offer-box:hover .offer-value h5 {
    background: var(--ploting-white);
    color: var(--ploting-base);
}

.buy-now-btn {
    position: absolute;
    background: var(--ploting-white);
    border-radius: var(--ploting-bdr-radius-one);
    position: absolute;
    right: 0;
    bottom: 10px;
    transition: .4s ease-in-out;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

.buy-now-btn a {
    padding: 0 15px;
    line-height: 45px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ploting-blue);
}

.buy-now-btn a:hover {
    color: var(--ploting-base);
}

.offer-box:hover .buy-now-btn {
    right: 50px;
    visibility: visible;
    opacity: 1;
}

/*-------------------------------------------------------------- 
# 18. Contact  
--------------------------------------------------------------*/
.contact-section {
    padding: 114px 0 120px;
}

.contact-details-content {
    display: flex;
}

.contact-details-content h6 {
    margin-bottom: 10px;
    font-size: 24px;
    color: var(--ploting-black);
    text-transform: capitalize;
    font-weight: 600;
    word-wrap: break-word;
}

.contact-detail a {
    color: var(--ploting-gray-three);
}

.contact-detail a:hover {
    color: var(--ploting-base);
}

.contact-box-icon {
    margin-right: 30px;
}

.contact-box-icon i {
    color: var(--ploting-base);
    margin-left: 15px;
    font-size: 40px;
    line-height: 48px;
}

.contact-info-box {
    position: relative;
    padding: 40px;
    background: var(--ploting-not-gray);
    border-radius: var(--ploting-bdr-radius-three);
    margin-right: 120px;
}

.contact-info-box::before {
    content: "";
    position: absolute;
    background: var(--ploting-base);
    width: 50px;
    height: 90%;
    right: -50px;
    bottom: 25px;
    border-radius: 0 20px 20px 0;
}

.contact-section .form-control {
    padding: 1rem 1.5rem;
    border-radius: var(--ploting-bdr-radius-three);
}

.business_form_custom {
    padding: 40px;
    background: var(--ploting-blue);
    border-radius: var(--ploting-bdr-radius-three);
}

/*--------------------------------------------------------------
# 19. Blog  
--------------------------------------------------------------*/
.blog-section {
    position: relative;
    padding: 114px 0 96px;
}

.blog-section.blog-inner {
    padding: 120px 0;
}

.blog-section.blog-inner::before {
    display: none;
}

.blog-section-bg {
    background: var(--ploting-not-gray);
}

.blog-section::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 42.7%;
    left: 0;
    bottom: 0;
    background: var(--ploting-base);
}

.blog-box-detail {
    position: relative;
    background: var(--ploting-light-ash);
    border-radius: 0 0 20px 20px;
}

.blog-box-detail h4 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.4;
}

.blog-box-detail h4 a {
    color: var(--ploting-black);
}

.blog-box-detail h4 a:hover {
    color: var(--ploting-base);
}

.blog-box-detail p {
    font-size: 16px;
    margin-bottom: 25px;
}

.blog-post-date {
    position: absolute;
    display: block;
    top: -104px;
    right: -51px;
    transform: rotate(-90deg);
    background: var(--ploting-base);
    padding: 16px 25px;
    font-size: 14px;
    color: var(--ploting-white);
    border-radius: 0 0 10px 0;
    z-index: 1;
}

.blog-post-date::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.blog-categories {
    position: absolute;
    top: -52px;
    left: 0;
    background: var(--ploting-base);
    padding: 15px 25px;
    font-size: 14px;
    color: var(--ploting-white);
    border-radius: 0 10px 0 0;
    z-index: 2;
}

.blog-author {
    display: flex;
    justify-content: space-between;
}

.blog-author span {
    position: relative;
    padding: 0 0 20px 0;
    display: block;
    color: var(--ploting-gray-three);
}

.blog-author a {
    color: var(--ploting-base);
}

.blog-author a:hover {
    color: rgba(var(--ploting-base-rgb), 0.7);
}

.blog-section .space-date {
    color: var(--ploting-black);
    font-weight: 700;
}

.blog-section .img_blog {
    position: relative;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    margin-right: 54px;
    box-shadow: 54px 0 0 0 rgba(var(--ploting-blue-rgb), 1);
    z-index: 1;
}

.blog-section .img_blog img {
    width: 100%;
}

.blog-section .blog-text {
    margin-bottom: 26px !important;
}

.blog-page-pagination {
    position: relative;
    display: block;
    padding: 25px 0 0px;
}

.blog-page-pagination .pg-pagination li {
    display: inline-block;
    margin-right: 7px;
}

.blog-page-pagination .pg-pagination li:last-child {
    margin-right: 0;
}

.blog-page-pagination .pg-pagination li a {
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    display: inline-block;
    color: var(--ploting-gray-two);
    background-color: transparent;
    border: 1px solid var(--ploting-gray-two);
    font-weight: 500;
    font-size: 16px;
    border-radius: 50%;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.blog-page-pagination .pg-pagination li a:hover {
    background-color: var(--ploting-base);
    color: var(--ploting-white);
    border: 1px solid var(--ploting-base);
}

/* Single Blog Section */

.single-blog-section {
    position: relative;
}

.single-blog-details-with-color-bg {
    background: var(--ploting-not-gray);
    padding: 120px 0 92px;
}

.single-blog-details-no-color-bg {
    padding: 120px 0 120px;
}

.single-blog-section .det-content p {
    margin-bottom: 25px;
}

.single-blog-section .det-content h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
    margin-top: 44px;
    margin-bottom: 18px;
    color: var(--ploting-black);
}

.single-blog-section .blog-detail .b-det-img img {
    width: 100%;
    border-radius: var(--ploting-bdr-radius-one);
}

.single-blog-section .det-meta {
    padding: 10px 0 13px;
    border-bottom: 1px solid var(--ploting-light-ash);
    margin-bottom: 25px;
    position: relative;
}

.single-blog-section .det-meta a {
    color: var(--ploting-gray-two);
    font-size: 12px;
    padding-right: 20px;
    margin-right: 15px;
    text-transform: capitalize;
    border-right: 1px solid var(--ploting-gray-two);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    display: inline-block;
}

.single-blog-section .det-meta a:last-child {
    border-right: 0;
}

.single-blog-section .det-meta i {
    color: var(--ploting-base);
    margin-right: 5px;
}

.single-blog-section .det-list img {
    border-radius: var(--ploting-bdr-radius-one);
}

.single-blog-section .blog-tags {
    padding: 18px 0;
    border-bottom: 1px solid var(--ploting-not-gray);
    margin-top: 20px;
    margin-bottom: 20px;
}

.single-blog-section .blog-det-social {
    margin: 4px 4px 4px 0;
    display: inline-block;
    padding: 10px 8px;
    text-transform: capitalize;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.single-blog-section .blog-det-social:hover,
.single-blog-section .aut-social a:hover {
    color: var(--ploting-base);
}

.single-blog-section .blog-tags .title {
    text-transform: capitalize;
    color: var(--ploting-black);
    margin-right: 10px;
    font-size: 18px;
    font-weight: 600;
}

.single-blog-section .author-section {
    margin: 60px 0;
}

.single-blog-section .blog-detail .sec-title {
    position: relative;
    font-size: 18px;
    padding-left: 0;
    padding-right: 16px;
    font-weight: 600;
    display: inline-block;
    text-transform: capitalize;
    color: var(--ploting-black);
}

.single-blog-section .author-post {
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 30px;
    background-color: var(--ploting-white);
    box-shadow: 0 0 51px 0 rgba(var(--ploting-gray-three-rbg), 0.15);
    border-radius: var(--ploting-bdr-radius-one);
}

.single-blog-section .aut-img {
    display: table-cell;
    vertical-align: top;
    width: 96px;
}

.single-blog-section .aut-img img {
    border-radius: 200px;
    border: 3px solid var(--ploting-not-gray);
}

.single-blog-section .aut-content {
    display: table-cell;
    vertical-align: top;
    padding-left: 20px;
}

.single-blog-section .aut-content h5 {
    color: var(--ploting-black);
    font-weight: 600;
}

.single-blog-section .aut-content p {
    margin-top: 15px;
}

.single-blog-section .aut-social {
    position: absolute;
    right: 30px;
    top: 30px;
}

.single-blog-section .aut-social a {
    font-size: 16px;
    padding: 0 5px;
    display: inline-block;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.blog-nav .blog-prev,
.blog-nav .blog-next {
    padding: 14px 14px 6px;
    margin-left: 5px;
    background: var(--ploting-blue);
    border: 1px solid var(--ploting-blue);
    border-radius: 50%;
    transition: ease all 300ms;
    -webkit-transition: ease all 300ms;
    -moz-transition: ease all 300ms;
    -ms-transition: ease all 300ms;
    -o-transition: ease all 300ms;
}

.blog-nav .blog-prev:hover,
.blog-nav .blog-next:hover {
    background: none;
    border: 1px solid var(--ploting-base);
}

.blog-nav .blog-prev i:before,
.blog-nav .blog-next i:before {
    font-size: 22px;
    color: var(--ploting-white);
    transition: ease all 300ms;
    -webkit-transition: ease all 300ms;
    -moz-transition: ease all 300ms;
    -ms-transition: ease all 300ms;
    -o-transition: ease all 300ms;
}

.blog-nav .blog-prev:hover i:before,
.blog-nav .blog-next:hover i:before {
    color: var(--ploting-base);
}

.blog-showdo-box {
    position: relative;
    padding: 30px 30px 20px 50px;
    background: var(--ploting-blue);
    margin: 30px 0;
    border-radius: var(--ploting-bdr-radius-two) 0 0 var(--ploting-bdr-radius-two);
}

.blog-showdo-box::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 10px;
    right: 0;
    top: 0;
    background: var(--ploting-base);
}

.blog-showdo-box blockquote {
    font-size: 20px;
    font-weight: 500;
    font-style: italic;
    color: var(--ploting-white);
}

.blog-showdo-box.left-sp {
    border-radius: 0 var(--ploting-bdr-radius-two) var(--ploting-bdr-radius-two) 0;
}

.blog-showdo-box.left-sp::before {
    left: 0;
}

.blog-note li p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--ploting-gray-three);
    margin-bottom: 10px;
}

.blog-note li i {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background-color: var(--ploting-not-gray);
    border-radius: 50%;
    font-size: 20px;
    color: var(--ploting-base);
    margin-right: 15px;
}

/*-------------------------------------------------------------- 
# 20. Get A Quote
--------------------------------------------------------------*/
.get-quote-section {
    position: relative;
    padding: 120px 0 80px;
    background: var(--ploting-base);
}

.get-quote-section::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100.2%;
    left: -100px;
    top: 0;
    background: var(--ploting-blue);
    clip-path: polygon(0 0, 90% -55%, 100% 100%, 0 100%);
}

.get-quote-section .site-button {
    padding: 1.1rem 1.6rem 1.1rem 1rem;
    border-radius: 0 50% 50% 0;
    font-size: 20px;
    background: var(--ploting-base);
    color: var(--ploting-white);
    border: 1px solid var(--ploting-white);
}

.get-quote-section h4 {
    font-size: 34px;
    font-weight: 600;
    color: var(--ploting-base);
    line-height: 1em;
    margin-bottom: 10px;
}

.get-quote-section p {
    color: var(--ploting-white);
}

/*--------------------------------------------------------------
# 21. Sidebar 
--------------------------------------------------------------*/
.widget {
    margin-bottom: 65px;
    font-size: 15px;
    padding: 30px;
    box-shadow: 0 0 51px 0 rgba(67, 67, 67, 0.15);
    border-radius: var(--ploting-bdr-radius-one);
}

.widget:last-child {
    margin-bottom: 0;
}

.widget h3 {
    line-height: 0.8;
    margin-bottom: 1.5em;
    position: relative;
    font-weight: 900;
    font-size: 26px;
    color: var(--ploting-gray);
}

.widget h3:before {
    content: "";
    width: 30px;
    height: 1px;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background: var(--ploting-base);
}

.widget h3:after {
    content: "";
    width: 100px;
    height: 1px;
    position: absolute;
    bottom: -25px;
    left: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all .5s ease-out;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    background: rgba(var(--ploting-blue-rgb), 0.2);
}

.widget:hover h3:after {
    width: 150px;
}

.widget ul li:last-child {
    border-bottom: 0;
}

.widget ul li,
.widget-categories ul li,
.widget-recent-post ul li {
    position: relative;
    padding: 15px 0;
    border-bottom: 1px solid var(--ploting-not-gray);
}

.widget ul li::before {
    content: "\f101";
    display: block;
    position: absolute;
    bottom: 20px;
    color: var(--ploting-base);
    font: normal normal normal 14px/1 FontAwesome;
}

.widget-archie ul li a,
.blog-category a,
.widget-meta a {
    margin-left: 20px;
    transition: all .5s ease-out;
}

.widget ul li a:hover,
.widget_categories ul li a:hover {
    color: var(--ploting-base);
}

.widget-recent-post ul li {
    display: inline-block;
    width: 100%;
}

.widget-recent-post ul li::before {
    content: none;
}

.widget-recent-post .blog-rp-image {
    float: left;
    margin-right: 12px;
    border-radius: var(--ploting-bdr-radius-one);
    ;
    overflow: hidden;
    width: 80px;
}

.widget-recent-post .blog-rp-image img {
    width: 100%;
}

.widget-recent-post .blog-rp-info p {
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 18px;
}

.widget-recent-post .blog-rp-info p a {
    font-size: 13px;
    font-weight: 600;
}

.side-form {
    position: relative;
}

.side-form input[type="text"] {
    border-radius: 0;
    height: 55px;
    margin-bottom: 0;
    padding-left: 20px;
    width: 100%;
    background: var(--ploting-not-gray);
    border-radius: var(--ploting-bdr-radius-three);
}

.side-form button {
    position: absolute;
    bottom: 15px;
    right: 20px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ploting-base);
}

.tag {
    background-color: var(--ploting-not-gray);
    color: var(--ploting-black);
    margin: 4px 4px 4px 0;
    display: inline-block;
    padding: 10px 18px;
    text-transform: capitalize;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    border-radius: var(--ploting-bdr-radius-one);
}

.tag:hover {
    background-color: var(--ploting-blue);
    color: var(--ploting-base);
}

/*--------------------------------------------------------------
# 22. Comment 
--------------------------------------------------------------*/
.comment-inner {
    padding: 30px;
    position: relative;
    margin: 30px 0 50px;
    background-color: var(--ploting-white);
    box-shadow: 0 0 51px 0 rgba(var(--ploting-gray-three-rbg), 0.15);
    border-radius: var(--ploting-bdr-radius-one);
}

.reply {
    position: absolute;
    top: 30px;
    right: 30px;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 12px;
    color: var(--ploting-black);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.reply i {
    margin-right: 5px;
}

.com-img {
    width: 80px;
    height: 80px;
    display: table-cell;
    vertical-align: top;
}

.com-img img {
    border-radius: 200px;
}

.comm-content {
    display: table-cell;
    vertical-align: top;
    padding-left: 20px;
}

.comm-content h5 {
    font-weight: 600;
    color: var(--ploting-black);
}

.comm-content p {
    margin-top: 15px;
}

.comm-content span {
    color: var(--ploting-base);
    font-size: 13px;
    display: inline-block;
    margin-left: 20px;
    font-weight: 600;
}

.sub-comm {
    margin-left: 80px;
}

.comment-form {
    margin-top: 20px;
}

.form-control {
    padding: 1rem 1.5rem;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}


/*-------------------------------------------------------------- 
# 23. Map 
--------------------------------------------------------------*/
.map-section {
    position: relative;
    padding: 0;
    margin: 0;
}

.google-maps iframe {
    display: block;
    height: 100%;
    min-height: 450px;
    position: relative;
    width: 100%;
    z-index: 1;
}

/*--------------------------------------------------------------
# 24. Login / Registration
--------------------------------------------------------------*/
.login-section,
.registration-section {
    position: relative;
}

.login-one,
.registration-one {
    padding: 114px 0 120px;
}

.login-wrapper {
    padding: 45px;
    border: 1px solid rgba(var(--ploting-gray-rgb), 0.5);
    border-radius: var(--ploting-bdr-radius-one);
    width: 500px;
    position: relative;
    background: var(--ploting-blue);
}

.login-wrapper .form-group {
    font-size: 16px;
}

.login-wrapper .form-group input[type=checkbox] {
    margin-left: 5px;
}

.login-wrapper .form-group label {
    margin-bottom: 0;
    color: var(--ploting-not-gray);
}

/*--------------------------------------------------------------
# 25. 404 Error 
--------------------------------------------------------------*/
.error-404-section {
    padding: 98px 0 120px;
}

.error-404 {
    text-align: center;
}

.error-404 h1 {
    font-size: 204px;
    line-height: 0.9em;
    color: var(--ploting-base);
    font-weight: 900;
}

/*--------------------------------------------------------------
# 26. Site Footer
--------------------------------------------------------------*/
.site-footer {
    position: relative;
    display: block;
    background-color: var(--ploting-blue);
    overflow: hidden;
    z-index: 1;
}

.site-footer-top {
    position: relative;
    display: block;
    padding: 100px 0 100px;
}

.footer-widget-about {
    position: relative;
    display: block;
}

.footer-widget-title-box {
    position: relative;
    display: block;
    margin-bottom: 19px;
}

.footer-widget-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    color: var(--ploting-white);
}

.footer-widget-list {
    position: relative;
    display: block;
}

.footer-widget-list li {
    position: relative;
    display: block;
}

.footer-widget-list li+li {
    margin-top: 5px;
}

.footer-widget-list li a {
    font-size: 15px;
    font-weight: 300;
    line-height: 26px;
    color: rgba(var(--ploting-light-ash-rgb), 0.7);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.footer-widget-list li a:hover {
    color: var(--ploting-base);
}

.footer-widget-explore {
    margin-left: 26px;
}

.footer-widget-links {
    position: relative;
    display: block;
    margin-left: 45px;
    margin-right: -15px;
}

.footer-widget-blog {
    margin-left: 63px;
    position: relative;
    display: block;
}

.footer-widget-contact {
    position: relative;
    display: block;
    margin-left: 23px;
}

.footer-widget-contact .footer-widget-title-box {
    margin-bottom: 25px;
}

.footer-widget-contact-list {
    position: relative;
    display: block;
}

.footer-widget-contact-list>li+li {
    margin-top: 7px;
}

.footer-widget-contact-list li>p {
    font-size: 15px;
    font-weight: 300;
    line-height: 26px;
    color: rgba(var(--ploting-light-ash-rgb), 0.7);
}

.footer-widget-contact-list li>a {
    font-size: 15px;
    font-weight: 300;
    line-height: 26px;
    color: rgba(var(--ploting-light-ash-rgb), 0.7);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.footer-widget-contact-list li>a:hover {
    color: var(--ploting-base);
}

.footer-widget-social {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 29px;
}

.footer-widget-social a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: var(--ploting-bdr-radius-one);
    background-color: var(--ploting-base);
    font-size: 13px;
    color: var(--ploting-white);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.footer-widget-social a:hover {
    color: var(--ploting-white);
    background-color: rgb(var(--ploting-base-rgb), 0.7);
}

.footer-widget-social a+a {
    margin-left: 8px;
}

.site-footer-bottom {
    position: relative;
    display: block;
    border-top: 1px solid rgba(var(--ploting-white-rgb), .15);
    z-index: 1;
}

.site-footer-bottom-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 38px 0 41px;
}

.site-footer-bottom-text {
    color: var(--ploting-white);
    font-size: 15px;
}

.site-footer-bottom-links {
    position: relative;
    display: flex;
    align-items: center;
}

.site-footer-bottom-links li {
    position: relative;
    display: block;
}

.site-footer-bottom-links li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: -8px;
    bottom: 10px;
    width: 2px;
    background-color: var(--ploting-white);
}

.site-footer-bottom-links li:first-child::before {
    display: none;
}

.site-footer-bottom-links li+li {
    margin-left: 14px;
}

.site-footer-bottom-links li a {
    font-size: 15px;
    color: var(--ploting-white);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.site-footer-bottom-links li a:hover {
    color: var(--ploting-base);
}


/* Site Footer Two */
.site-footer-two {
    margin-top: 0;
}

.site-footer-two .site-footer-top {
    padding: 77px 0 95px;
}

.site-footer-two .site-footer-bottom {
    border-top: 0;
}

.site-footer-two .site-footer-bottom-inner {
    padding-right: 30px;
}

.site-footer-two .site-footer-bottom-inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: -10000000px;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--ploting-white-rgb), .05);
}