/* ----------------------------------

Template Name: Anaton - SaaS Landing Page Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Outfit
Main Color   : #ff8a43

-------------------------------------

[Typography]

Body copy:    15px 'Outfit', sans-serif
Header:     36px 'Outfit', sans-serif
Input, textarea:  16px 'Outfit', sans-serif
Sidebar heading:  22px 'Outfit', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
        - Accordion
        - Tabs
    02. Preloader
    03 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
    04. Banner
        - Content Double (Version One)
        - Software Banner (Version Two)
        - Animated Banner (Version Three)
    05. Feature
        - Version One
        - Version Two
        - Version Three
    06. Brand / Partner
    07. Overview / Software Details
    08. Services
        - Version One
        - Version Two
        - Version Three
        - Service Details
    09. World Wide user / Total Customers
    10. Pricing
        - Version One
        - Version Two
        - Version Three
    11. Testimonials
        - Version One
        - Version Two
    12. Faq
        - Version One
        - Version Two
    13. Work Process
    13. Why Choose Us
    15. Sign Up Form
    16. Technology / Featured With
    17. Software Premium Content
    18. Team
    19. Team Details
    20. Projects
    21. Projects Details
    22. Blog
        - Standard
        - Left Sidebar
        - Right Sidebar
        - Single
    23. Error 404
    24. Footer
    25. PHP Contact Form
    26. Others

*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');


/* Varialbes */
:root { --font-default: 'Outfit', sans-serif; --font-heading: 'Outfit', sans-serif; --fontawesome: "Font Awesome 5 Pro"; --black: #000000; --dark: #0c1532; --dark-secondary: #041637; --white: #ffffff; --color-primary: #d0315f; --color-secondary: #fa7070; --color-optional: #234582; --color-heading: #3d5d88; --color-paragraph: #181c35; --box-shadow-primary: -1px 3px 10px 0 rgba(0, 0, 0, 0.6); --box-shadow-secondary: 0 10px 30px 0 rgba(44, 130, 237, 0.4); --box-shadow-regular: 0px 2px 12px 0px #e7e7e7; --bg-gray: #f0f4f7; --bg-gradient: linear-gradient(90deg, #ff8a43 20%, #fa7070 100%); --bg-gradient-reverse: linear-gradient(90deg, var(--color-optional) 0%, #181c35 100%); }



/* ============================================================== 
     # Reset Browsers
=================================================================== */

* { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }

body,
html { height: 100%; }

html { margin: 0; padding: 0; width: 100%; height: 100%; scroll-behavior: smooth; }

html, body, div, span, img,
ol, ul, li, a, p, h1, h2, h3,
h4, h5, h6, option, legend, label,
table, th, td, tr, article, aside,
caption, figure, footer, header, hgroup,
mark, nav, section, time, audio, video { margin: 0; padding: 0; border: 0; outline: 0; }

.wrapper { height: 100%; }

img { border: none; outline: none; max-width: 100%; }

label { display: inline-block; font-weight: normal; margin-bottom: 5px; max-width: 100%; }

a { outline: none; text-decoration: none; color: var(--color-heading); }

a img { border: none; }

a:active { outline: none; text-decoration: none; color: var(--color-heading); opacity: 1; }

a:focus { outline: none; text-decoration: none; color: var(--color-heading); }

a:hover { outline: none; text-decoration: none; color: var(--color-primary); opacity: 1; }

.secondary a:hover { color: var(--color-optional); }

button { outline: medium none; }

iframe { border: none; }

hr { margin-top: 0; margin-bottom: 0; border: 0; border-top: 1px solid #eeeeee; }

pre { display: block; margin: 0 0 30px; padding: 9.5px; word-wrap: break-word; word-break: break-all; color: #333333; border: 1px solid #ededed; border-radius: inherit; background-color: #f9f9f9; font-size: 13px; line-height: 1.42857143; }

input { border: 1px solid #e7e7e7; border-radius: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; min-height: 50px; }

input:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; }

textarea:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; }

select:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; }

ul { list-style-type: none; }

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

b { font-weight: 800; }

strong { font-weight: 800; }

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


/* ============================================================== 
    # Template Default Styles
=================================================================== */

body { font-family: var(--font-default); font-size: 16px; font-weight: 400; line-height: 28px; overflow-x: hidden; background-color: var(--white); color: var(--color-paragraph); }

h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-weight: normal; line-height: 1.2; font-family: var(--font-heading); letter-spacing: 0; margin: 0; margin-bottom: 15px; }

h1 { font-size: 40px; }

h2 { font-size: 36px; }

h3 { font-size: 27px; }

h4 { font-size: 20px; }

h5 { font-size: 18px; }

h6 { font-size: 14px; }

a, .btn, button { -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; outline: medium none; text-decoration: none; font-weight: 600; }

p { color: var(--color-paragraph); margin: 0 0 15px; text-transform: none; font-weight: 400; font-family: var(--font-default); }


@keyframes shadow-pulse {
    0% { box-shadow: 0 0 0 0px rgb(9 235 95 / 29%); }

    100% { box-shadow: 0 0 0 35px rgba(0, 0, 0, 0); }
}
.whatsapp-icon-background { position: fixed; display: flex; right: 50px; bottom: 50px; z-index: 10; background: linear-gradient(90deg, rgba(3,190,87,1) 40%, rgba(9,243,96,1) 100%); padding: 11px; border-radius: 50px; animation: shadow-pulse 2s infinite; }

.whatsapp-icon-img { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(172deg) brightness(105%) contrast(102%); }

/* ============================================================== 
    # Helper CSS
=================================================================== */

@media (min-width: 1250px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl { max-width: 1250px; }
}

.container-full { padding: 0 15px; margin: auto; max-width: 1400px; }

@media (min-width: 576px) {
    .container-full { max-width: 540px; width: 100%; }
}

@media (min-width: 768px) {
    .container-full { max-width: 720px; width: 100%; }
}

@media (min-width: 992px) {
    .container-full { max-width: 960px; width: 100%; }
}

@media (min-width: 1200px) {
    .container-full { max-width: 95%; width: 95%; }
}

.container-fill { padding: 0 15px; margin: auto; max-width: 100%; }

@media (min-width: 576px) {
    .container-fill { max-width: 540px; width: 100%; }
}

@media (min-width: 768px) {
    .container-fill { max-width: 720px; width: 100%; }
}

@media (min-width: 992px) {
    .container-fill { max-width: 960px; width: 100%; }
}

@media (min-width: 1200px) {
    .container-fill { width: 100%; max-width: 100%; }
}

@media (max-width: 1199px) {
    .container-fill { padding: 0 15px; width: 100%; }
}

@media only screen and (min-width: 1367px) {
    .container-stage { margin-left: calc((100% - 1250px)/ 2); width: auto; min-width: auto; max-width: inherit; padding-right: 0; }
}

@media only screen and (max-width: 767px) {
    .row { --bs-gutter-x: 1.5rem; }
}

.bg-cover { background-position: center center !important; background-size: cover !important; }

.bg-fixed { background-attachment: fixed !important; background-position: center center !important; background-size: cover !important; }

.bg-fit { background-size: 100% 100% !important; background-position: center !important; }

.bg-gray { background: var(--bg-gray); }

.bg-light { background-color: var(--white) !important; }

.bg-dark { background-color: var(--dark) !important; }

.bg-dark-secondary { background-color: var(--dark-secondary) !important; }

.bg-theme { background-color: var(--color-primary); }

.bg-gradient { background-color: var(--color-primary); background: var(--bg-gradient) !important; }

.bg-gradient-secondary { background-color: var(--color-optional); background: var(--bg-gradient-reverse) !important; }

.text-light { color: var(--white); }

.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light p,
.text-light span,
.text-light a { color: var(--white); }

.shadow { -webkit-box-shadow: inherit !important; box-shadow: inherit !important; }

.shadow.dark { position: relative; z-index: 1; }

.shadow.dark:after { background: var(--dark); content: ""; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.shadow.dark-hard { position: relative; z-index: 1; }

.shadow.dark-hard:after { background: rgba(0, 4, 30, 0) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.65; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.shadow.theme { position: relative; z-index: 1; }

.shadow.theme:after { background: var(--color-primary) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.shadow.light { position: relative; z-index: 1; }

.shadow.light:after { background: var(--white) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.6; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.default-padding,
.default-padding-top,
.default-padding-bottom,
.default-padding-mx { position: relative; }

.default-padding { padding-top: 120px; padding-bottom: 120px; }

@media only screen and (max-width: 767px) {
    .default-padding { padding-top: 50px; padding-bottom: 50px; }
}

.default-padding-big { padding: 250px 0; }

@media only screen and (max-width: 767px) {
    .default-padding-big { padding: 50px 0; }
}

.default-padding-top { padding-top: 120px; }

@media only screen and (max-width: 767px) {
    .default-padding-top { padding-top: 50px; }
}

.default-padding-bottom { padding-bottom: 120px; }

@media only screen and (max-width: 767px) {
    .default-padding-bottom { padding-bottom: 50px; }
}

.default-padding.bottom-less { padding-top: 120px; padding-bottom: 90px; }

@media only screen and (max-width: 767px) {
    .default-padding.bottom-less { padding-top: 50px; padding-bottom: 20px; }
}

.default-padding-bottom.bottom-less { margin-bottom: -30px; }

@media only screen and (max-width: 767px) {
    .default-padding-bottom.bottom-less { margin-bottom: 0; }
}

.default-padding-top.bottom-less { margin-bottom: -30px; }

@media only screen and (max-width: 767px) {
    .default-padding-top.bottom-less { margin-bottom: -20px; }
}

@media only screen and (min-width: 1200px) {
    .align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
}

.relative { position: relative; }

.overflow-hidden { overflow: hidden; }

.border-top { border-top: 1px solid #e7e7e7; }

.border-bottom { border-bottom: 1px solid #e7e7e7; }

.border-left { border-left: 1px solid #e7e7e7; }

.border-right { border-right: 1px solid #e7e7e7; }

.heading { font-weight: 600; margin-bottom: 25px; margin-top: -5px; font-size: 42px !important; line-height: 1.3; }

.heading span { font-weight: 400; }

.site-heading { margin-bottom: 60px; }

.site-heading strong { display: inline-block; font-weight: 600; position: relative; z-index: 1; }

.site-heading strong::after { position: absolute; left: 0; bottom: -5px; content: ""; height: 100%; width: 100%; background: url(../img/shape/35.png); background-size: contain; background-repeat: no-repeat; background-position: bottom center; z-index: -1; }

.title { font-weight: 600; font-size: 42px; line-height: 1.3; }

.site-heading .title { margin-bottom: 0; }

.sub-title { text-transform: uppercase; color: var(--color-primary); font-weight: 600; background: var(--bg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; z-index: 1; }

.bg-gradient .sub-title { color: var(--white); -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; background: transparent; }

.site-heading p { margin-bottom: 0; margin-top: 25px; padding: 0 10%; }

.site-heading .devider { display: inline-block; width: 50px; height: 2px; background: var(--color-primary); position: relative; z-index: 1; left: 10px; }

.site-heading.light .devider,
.bg-theme .site-heading .devider,
.bg-gradient .site-heading .devider,
.shadow .site-heading .devider,
.bg-dark .site-heading .devider { background: var(--white); }

@media (max-width: 767px) {
    .site-heading p { padding: 0; }
}

@media only screen and (max-width: 767px) {
    .site-heading { margin-bottom: 30px; }
}

.heading-left { position: relative; z-index: 1; margin-bottom: 60px; }

.heading-left .heading { font-weight: 600; margin-bottom: 0; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .heading-left .heading { margin-bottom: 30px; }
}

@media only screen and (max-width: 767px) {
    .heading-left .heading { margin-bottom: 15px; }
}

.heading-left p { margin-bottom: 0; }

.heading-left .btn { margin-top: 30px; }

@media only screen and (max-width: 767px) {
    .heading-left { margin-bottom: 30px; }
}

.bg-dark .heading-left p { opacity: 0.8; }

.sub-heading { text-transform: uppercase; color: var(--color-primary); font-weight: 600; background: var(--bg-gradient-reverse); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; z-index: 1; margin-bottom: 20px; }

.shadow .sub-heading { -webkit-text-fill-color: var(--white); font-weight: 600; }

.bg-gradient .sub-heading { color: var(--white); background: transparent; -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; opacity: 0.9; }

.bg-theme .sub-title,
.bg-gradient .sub-heading { -webkit-text-fill-color: inherit; color: var(--white); }



/* ============================================================== 
    # Video Play Button 
=================================================================== */
.video-play-button { display: inline-block; background: var(--color-primary); height: 60px; width: 60px; line-height: 60px; text-align: center; border-radius: 50%; color: var(--color-heading); position: relative; }

.video-play-button i { font-weight: 400; font-size: 20px; position: relative; left: 3px; top: 2px; }

.video-play-button .effect { position: absolute; width: 100px; height: 100px; background: var(--color-primary); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; }

.video-play-button .effect::after { position: absolute; content: ""; width: 70px; height: 70px; background: var(--color-primary); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; -webkit-animation-delay: 2s; animation-delay: 2s; }

.video-play-button .effect::before { position: absolute; content: ""; width: 60px; height: 60px; background: var(--color-secondary); opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; -webkit-animation-delay: 3s; animation-delay: 3s; }

.video-play-button.with-text { width: auto; background: transparent; }

.video-play-button.with-text span { position: relative; z-index: 1; }

.video-play-button.with-text span i { margin-left: 25px; margin-right: 30px; color: var(--white); left: -1px; }

.video-play-button.with-text .effect { height: 60px; width: 60px; left: 0; -webkit-animation: inherit; animation: inherit; background: var(--color-primary); top: 0; opacity: 1; z-index: 1; }

.video-play-button.with-text .effect::before { display: none; }

.video-play-button.with-text .effect::after { background: var(--color-primary); height: 100%; width: 100%; z-index: inherit; -webkit-animation-delay: 0s; animation-delay: 0s; }

@-webkit-keyframes pulse-border {
    0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; }

    100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; }
}

@keyframes pulse-border {
    0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; }

    100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; }
}

/* ============================================================== 
    # Template Animation
=================================================================== */

/* Video Paly */
@-webkit-keyframes video-play {
    0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; }

    100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; }
}

@keyframes video-play {
    0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; }

    100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; }
}

/*Zoom Animation */
.zoom-animation { -webkit-animation: zoom 2000ms ease-out infinite; animation: zoom 2000ms ease-out infinite; }

/* Slider Zoom Effect */
@-webkit-keyframes zoom {
    from { -webkit-transform: scale(1, 1); }

    to { -webkit-transform: scale(1.2, 1.2); }
}

@keyframes zoom {
    from { -webkit-transform: scale(1, 1); transform: scale(1, 1); }

    to { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
}

/* Spiner Animation */
.spiner-animation { -webkit-animation: spinner 20s infinite linear; animation: spinner 20s infinite linear; }

/*Preloader Spiner Animation */
@-webkit-keyframes spinner {
    to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

@keyframes spinner {
    to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}


/* Spiner Animation */
.spiner-reverse-animation { -webkit-animation: spinnerReverse 20s infinite linear; animation: spinnerReverse 20s infinite linear; }

/*Preloader Spiner Animation */
@-webkit-keyframes spinnerReverse {
    to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); }
}

@keyframes spinnerReverse {
    to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); }
}

/* Infinite Up Down Animation */
@keyframes UpDown {
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }

    50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); }

    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}

/* Animation UpDown */
.updown-animation { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); -webkit-animation-name: UpDown; animation-name: UpDown; -webkit-animation-duration: 2s; animation-duration: 2s; }

@-webkit-keyframes UpDown {
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }

    50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); }

    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}

/* Animation Left Right */
.leftRight-animation { -webkit-animation: fadeLeftRight 10s ease-out infinite; animation: fadeLeftRight 10s ease-out infinite; }

/* Fade Left Right */
@keyframes fadeLeftRight {
    0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); }

    50% { -webkit-transform: translateX(100px); transform: translateX(100px); }
}

@-webkit-keyframes fadeLeftRight {
    0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); }

    50% { -webkit-transform: translateX(100px); transform: translateX(100px); }
}

/* Animation Right Left */
.rightLeft-animation { -webkit-animation: fadeRightLeft 10s ease-out infinite; animation: fadeRightLeft 10s ease-out infinite; }

@keyframes fadeRightLeft {
    0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); }

    50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); }
}

@-webkit-keyframes fadeRightLeft {
    0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); }

    50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); }
}

/* Animation Zoom Up Down */
.zoomUpDown-animation { -webkit-animation: zoomUpDown 10s ease-out infinite; animation: zoomUpDown 10s ease-out infinite; }

/* Zoom Up Down */
@keyframes zoomUpDown {
    0%, 100% { -webkit-transform: scale(0.5); transform: scale(0.5); }

    50% { -webkit-transform: scale(0.7); transform: scale(0.7); }
}

@-webkit-keyframes zoomUpDown {
    0%, 100% { -webkit-transform: scale(0.5); transform: scale(0.5); }

    50% { -webkit-transform: scale(0.8); transform: scale(0.8); }
}

/* Animation Moving */
.moving-animation { -webkit-animation: moving 10s ease-out infinite; animation: moving 10s ease-out infinite; }

/* Mooving Animation */
@-webkit-keyframes moving {
    0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }

    20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); }

    50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); }

    70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); }

    100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
}

@keyframes moving {
    0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }

    20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); }

    50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); }

    70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); }

    100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
}

/* Animation Rotation */
@keyframes infinite-rotate {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }

    50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes infinite-rotate {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }

    50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* Button Border Animation */
@-webkit-keyframes open {
    0% { width: 0; height: 0; }

    50% { width: 100px; height: 0; }

    100% { width: 100px; height: 55px; }
}

@keyframes open {
    0% { width: 0; height: 0; }

    50% { width: 100px; height: 0; }

    100% { width: 100px; height: 55px; }
}

@-webkit-keyframes openB {
    0% { width: 0px; }

    100% { width: 100px; }
}

@keyframes openB {
    0% { width: 0px; }

    100% { width: 100px; }
}

/* Animation Shine (A shine color will move inside the text) */

@-webkit-keyframes shine {
    0% { background-position: 0; }

    60% { background-position: 180px; }

    100% { background-position: 180px; }
}

@keyframes shine {
    0% { background-position: 0; }

    60% { background-position: 180px; }

    100% { background-position: 180px; }
}

@-webkit-keyframes infiniteMove {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }

    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }

    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes infiniteMove {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }

    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }

    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@-webkit-keyframes infiniteMove2 {
    0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; }

    50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }

    100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; }
}

@keyframes infiniteMove2 {
    0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; }

    50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }

    100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; }
}

/* ============================================================== 
    # Button Styles
=================================================================== */
.btn { display: inline-block; font-weight: 500; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 7px; border: 2px solid transparent; -webkit-box-shadow: inherit; box-shadow: none !important; font-size: 16px; letter-spacing: 0; padding: 13px 30px; background: #E7EDF8; position: relative; z-index: 1; }

.btn:focus, .btn.active { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; -webkit-box-shadow: inherit; box-shadow: inherit; border: 2px solid transparent; }

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

.btn.radius { border-radius: 6px; }

.btn.btn-border { border: 2px solid #dddddd; background: transparent; position: relative; z-index: 1; overflow: hidden; font-weight: 600; }

.btn.btn-border::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); }

.btn.btn-border:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); }

.btn.btn-border:hover { border-color: var(--dark); }

.btn.btn-border.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: #e7e7e7; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

.btn.btn-border.animation:hover { border-color: #e7e7e7; color: var(--dark); }

.btn.btn-border.animation:hover::after { width: 100%; }

.btn.btn-border-dark { border: 2px solid var(--dark); background: transparent; }

.btn.btn-border-dark:hover { background: var(--dark); border-color: var(--dark); }

.btn.btn-border-dark.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

.btn.btn-border-dark.animation:hover { border-color: var(--dark); color: var(--white); }

.btn.btn-border-dark.animation:hover::after { width: 100%; }

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

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

.btn.btn-border-theme.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--color-primary); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

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

.btn.btn-border-theme.animation:hover::after { width: 100%; }

.btn.btn-border-light { border: 2px solid var(--white); background: transparent; color: var(--white); }

.btn.btn-border-light:hover { background: var(--white); border-color: var(--white); color: var(--dark); }

.btn.btn-border-light.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

.btn.btn-border-light.animation:hover { border-color: var(--white); color: var(--dark); }

.btn.btn-border-light.animation:hover::after { width: 100%; }

.btn.btn-gradient { border: none; color: var(--white); }

.btn.btn-gradient::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 100%; z-index: -1; background-image: linear-gradient(to left, #ff8a43, #e03535, #ff8a43 ); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; background-size: 220%; }

.btn.btn-gradient:hover::after { background-position: -70% 0; }

.btn.btn-gradient.active { background-position: -70% 0; }

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

.btn.btn-theme::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); }

.btn.btn-theme:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); }

button { display: inline-block; font-weight: 500; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 7px; border: 2px solid transparent; -webkit-box-shadow: inherit; box-shadow: inherit; font-size: 16px; letter-spacing: 0; padding: 14px 40px; background: #E7EDF8; position: relative; z-index: 1; color: var(--white); border: none; background: var(--color-primary); }

button::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); }

button:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); }

button i { margin-right: 4px; }

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

.btn.btn-theme.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); }

.text-light .btn.btn-theme.secondary::after { background-color: var(--white); }

.text-light .btn.btn-theme.secondary:hover { color: var(--color-heading); }

.btn.btn-theme.secondary:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); }

.btn.btn-theme.hover-light::after { background-color: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

.btn.btn-theme.hover-light:hover { color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

.btn.btn-theme.hover-light:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); }

.btn.btn-light { color: var(--color-heading); border: none; background: var(--white); border: 2px solid transparent; }

.btn.btn-light.btn-md { padding: 13px 52px; }

.btn.btn-light:hover { color: var(--white); background: transparent; border: 2px solid var(--white); }

.btn.btn-dark { color: var(--white); background: var(--dark); border: none; }

.btn.btn-dark::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background-color: var(--color-primary); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

.shadow .btn.btn-dark::after { background-color: var(--white); }

.shadow .btn.btn-dark:hover { color: var(--color-heading) !important; }

.btn.btn-dark:hover::after { width: 100%; }

.btn.btn-dark.secondary { color: var(--white); border: none; background: var(--dark); }

.btn.btn-dark.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--color-optional); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); }

.btn.btn-dark.secondary:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); }

.btn i { position: relative; top: 1px; margin-left: 5px; }

.btn.text-slide { min-width: 150px; height: 55px; line-height: 55px; }

.btn.text-slide span { position: absolute; height: 100%; width: 100%; top: 0; left: 0; text-align: center; }

.btn.animate-border { overflow: inherit; z-index: inherit; width: 200px; height: 55px; line-height: 55px; padding: 0; }

.btn.animate-border:hover { background: transparent; color: var(--dark); }

.btn.animate-border:hover .hover-border::after,
.btn.animate-border:hover .hover-border::before { opacity: 1; -webkit-animation: open 0.4s; /* Chrome, Safari, Opera */ animation: open 0.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-animation-direction: normal; animation-direction: normal; }

.btn.animate-border:hover .hover-border-bottom::after,
.btn.animate-border:hover .hover-border-bottom::before { opacity: 1; -webkit-animation: openB 0.4s; /* Chrome, Safari, Opera */ animation: openB 0.4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-animation-direction: normal; animation-direction: normal; }

.btn.animate-border .hover-border { position: absolute; left: 0; top: -1px; height: 100%; width: 100%; }

.btn.animate-border .hover-border::before { position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-left: solid 2px var(--color-primary); right: 98px; top: -1px; }

.btn.animate-border .hover-border::after { position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-right: solid 2px var(--color-primary); left: 98px; top: -1px; }

.btn.animate-border .hover-border-bottom { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; }

.btn.animate-border .hover-border-bottom::before { position: absolute; content: ""; width: 0; display: block; opacity: 0; height: 55px; border-bottom: solid 2px var(--color-primary); right: -1px; bottom: -2px; }

.btn.animate-border .hover-border-bottom::after { position: absolute; content: ""; width: 0; display: block; opacity: 0; height: 100%; border-bottom: solid 2px var(--color-primary); left: 0; bottom: -2px; }

.btn.animated-arrow { border: none; background: transparent; min-width: 14rem; height: auto; padding: 0; }

.btn.animated-arrow .circle { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3.5rem; height: 3.5rem; background: var(--color-primary); border-radius: 2rem; }

.btn.animated-arrow .circle .icon { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 15px; width: 1.125rem; height: 0.125rem; background: none; position: absolute; top: 0; bottom: 0; margin: auto; }

.btn.animated-arrow .circle .icon::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid var(--white); border-right: 0.125rem solid var(--white); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.btn.animated-arrow .button-text { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 15px 0; margin: 0 0 0 70px; color: var(--dark); line-height: 2; text-align: left; width: 100%; font-size: 14px; }

.btn.animated-arrow:hover { color: var(--white); }

.btn.animated-arrow:hover .circle { width: 100%; }

.btn.animated-arrow:hover .circle .icon.arrow { background: var(--white); -webkit-transform: translate(1.5rem, 0); transform: translate(1.5rem, 0); }

.btn.animated-arrow:hover .button-text { color: var(--white); }

.btn.circle { border-radius: 30px !important; }

.btn-simple { line-height: 1; text-transform: uppercase; display: inline-block; color: var(--color-paragraph); }

.btn-simple i { transform: rotate(-45deg); display: inline-block; margin-left: 2px; }

.btn-simple:hover { color: var(--color-primary); }

.video-btn i { display: inline-block; height: 55px; width: 55px; text-align: center; line-height: 55px; background: var(--color-primary); border-radius: 50%; position: relative; margin-right: 20px; color: var(--white); }

.text-light .video-btn i { background: var(--white); color: var(--color-primary); }

.video-btn i::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: var(--color-primary) repeat scroll 0 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; z-index: -1; }

.text-light .video-btn i::after { background: var(--white) repeat scroll 0 0; }

.text-shine { background: linear-gradient(to right, var(--dark) 0, var(--white) 10%, var(--color-primary) 20%); background-position: 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: shine 3s infinite linear; animation: shine 3s infinite linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-text-size-adjust: none; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; padding: 12px 48px; }

.animate-inout { background: -webkit-gradient(linear, left top, right top, from(#8A6552), to(#472d20)); background: linear-gradient(90deg, #8A6552 0%, #472d20 100%); color: var(--white); font-size: 12px; text-transform: capitalize; 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; position: relative; overflow: hidden; border: solid 2px var(--color-primary); cursor: pointer; }

.btn-icon { position: relative; padding-left: 20px; }

.btn-icon:hover { color: var(--color-primary); }

.btn-icon::after { position: absolute; right: 10px; top: 50%; content: ""; height: 2px; left: 0; background: var(--color-heading); transform: translateY(-50%); margin-top: -1px; transition: all 0.35s ease-in-out; }

.btn-icon:hover::after { background: var(--color-primary); }

.btn-icon i { font-weight: 500; }

.btn-icon:hover { padding-left: 40px; }

.animate-inout span { z-index: 1; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; line-height: 20px; }

.animate-inout::before, .animate-inout::after { width: 0%; height: 0%; position: absolute; content: ""; border-radius: 100%; }

.animate-inout:after { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; background-color: var(--white); }

.animate-inout:before { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: var(--color-primary); }

.animate-inout.animate-inout-borde { background: transparent; color: var(--dark); }

.animate-inout.animate-inout-borde::after { background: -webkit-gradient(linear, left top, right top, from(#8A6552), to(#472d20)); background: linear-gradient(90deg, #8A6552 0%, #472d20 100%); }

.animate-inout.animate-inout-borde:hover { color: var(--white); }

.animate-inout.animate-inout-borde:hover::before { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.animate-inout.animate-inout-borde:hover::after { -webkit-transition: all 0.7s ease-in; transition: all 0.7s ease-in; }

.animate-inout:hover { color: var(--dark); }

.animate-inout:hover::before, .animate-inout:hover::after { width: 200px; height: 200px; border-radius: 4px; }

.animate-inout:hover::before { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.animate-inout:hover::after { -webkit-transition: all 0.7s ease-in; transition: all 0.7s ease-in; }

.btn-md { padding: 16px 52px; font-size: 17px; }

.btn-sm { padding: 16px 50px; font-size: 14px; }

.mfp-close-btn-in .mfp-close::after { display: none; }

/* ============================================================== 
    # Nice Select Styles
=================================================================== */
.nice-select { -webkit-tap-highlight-color: transparent; background-color: var(--white); border: solid 1px #e8e8e8; -webkit-box-sizing: border-box; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 16px; font-weight: normal; height: 50px; line-height: 50px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: 100%; margin-bottom: 15px; }

.nice-select:hover { border-color: #dbdbdb; }

.nice-select:active, .nice-select.open, .nice-select:focus { border-color: #999999; }

.nice-select::after { border-bottom: 2px solid #999999; border-right: 2px solid #999999; content: ''; display: block; height: 5px; margin-top: -6px; pointer-events: none; position: absolute; right: 12px; top: 50%; -webkit-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; width: 5px; }

.nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); overflow-y: auto !important; height: auto; }

.nice-select.open ::after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

.nice-select.disabled { border-color: #ededed; color: #999999; pointer-events: none; }

.nice-select.disabled::after { border-color: #96aac1; }

.nice-select.wide { width: 100%; }

.nice-select.wide .list { left: 0 !important; right: 0 !important; }

.nice-select.right { float: right; }

.nice-select.right .list { left: auto; right: 0; }

.nice-select.small { font-size: 12px; height: 36px; line-height: 34px; }

.nice-select.small::after { height: 4px; width: 4px; }

.nice-select.small .option { line-height: 34px; min-height: 34px; }

.nice-select .list { background-color: var(--white); border-radius: 5px; -webkit-box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; width: 100%; }

.nice-select .list:hover .option:not(:hover) { background-color: transparent !important; }

.nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; }

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #f6f6f6; }

.nice-select .option.selected { font-weight: 600; }

.nice-select .option.disabled { background-color: transparent; color: #999999; cursor: default; }

.no-csspointerevents .nice-select .list { display: none; }

.no-csspointerevents .nice-select.open .list { display: block; }


/* ============================================================== 
    # Breadcrumb Styles
=================================================================== */
.breadcrumb-area { padding: 50px 0; padding-top: 150px; position: relative; z-index: 1; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center right; }

.breadcrumb-area .top-pad-extra { padding-top: 240px; }

.breadcrumb-area .row { position: relative; z-index: 1; }

.breadcrumb-area .breadcrumb { background: transparent none repeat scroll 0 0; display: inline-block; margin: 0; padding: 0; position: relative; z-index: 1; }

.breadcrumb-area .breadcrumb > li + li::before { content: "\f105"; font-family: "Font Awesome 5 Pro"; font-weight: 700; padding: 0 5px; color: var(--white); display: none; }

.breadcrumb-area .breadcrumb li { padding: 0 10px; position: relative; display: inline-block; z-index: 1; font-weight: 600; color: var(--white); font-family: var(--font-default); text-transform: uppercase; font-size: 14px; }

.breadcrumb-area .breadcrumb li a { color: var(--white); font-family: var(--font-default); font-weight: 600; }

.breadcrumb-area .breadcrumb li a:hover { color: var(--color-primary); }

.breadcrumb-area.secondary .breadcrumb li a:hover { color: var(--white); }

.breadcrumb-area .breadcrumb li.active { color: var(--color-primary); }

.breadcrumb-area.secondary .breadcrumb li.active { color: var(--color-optional); }

.breadcrumb-area .breadcrumb li::after { content: "\f105"; font-family: "Font Awesome 5 Pro"; font-weight: 500; right: -5px; position: absolute; line-height: 0; top: 50%; font-size: 14px; }

.breadcrumb-area .breadcrumb li i { margin-right: 3px; }

.breadcrumb-area .breadcrumb li:last-child::after { display: none; }

.breadcrumb-area h1 { display: inline-block; font-weight: 600; margin-top: -10px; position: relative; z-index: 1; }

.breadcrumb-area h1::after { position: absolute; left: -100px; top: -50px; content: ""; height: 150px; width: 150px; background: var(--white); z-index: -1; border-radius: 50%; opacity: 0.05; }

@media only screen and (max-width: 767px) {
    .breadcrumb-area { padding: 80px 0; }
}


/* ============================================================== 
    # Topbar Styles
=================================================================== */
.top-style-one .logo img { height: 60px; }

.top-style-one .social li { display: inline-block; }

.top-style-one { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e7e7e7; }

.top-style-one.transparent { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

.top-style-one .logo { text-align: center; border-left: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7; padding: 15px 0; }

.top-style-one.transparent .logo { border-left: 1px solid rgba(255, 255, 255, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.3); }

.top-style-one .social li a { display: inline-block; height: 43px; width: 43px; text-align: center; line-height: 45px; background: var(--bg-gradient); color: var(--white); border-radius: 50%; font-size: 15px; }

.top-style-one .text-end.social li { margin-left: 3px; }

.top-style-one .info i { font-weight: 100; font-size: 20px; position: relative; top: 2px; margin-right: 3px; color: var(--color-primary); }

.top-style-one .info li { font-weight: 500; text-transform: capitalize; }

@media (min-width: 1024px) {
    .top-style-one.transparent { border-bottom: 1px solid rgba(255, 255, 255, 0.3); position: absolute; left: 0; top: 0; width: 100%; z-index: 9; }
}

/* ============================================================== 
    # Banner Styles
=================================================================== */
.banner-area { height: 100%; width: 100%; position: relative; }

@media (max-width: 1023px) {
    .banner-area { height: auto; }
}

.banner-area div { height: 100%; }

.banner-area div.swiper-slide .row div { height: auto; }

.banner-area.top-pad-80 .content { padding-top: 80px; }

@media (max-width: 1023px) {
    .banner-area.top-pad-80 .content { padding-top: 200px; }
}

@media only screen and (max-width: 767px) {
    .banner-area.top-pad-80 .content { padding-top: 140px; }
}

.banner-area.top-pad-90 .content { padding-top: 90px; }

@media (max-width: 1023px) {
    .banner-area.top-pad-90 .content { padding-top: 200px; }
}

@media only screen and (max-width: 767px) {
    .banner-area.top-pad-90 .content { padding-top: 140px; }
}

.banner-area.top-pad-100 .content { padding-top: 100px; }

@media (max-width: 1023px) {
    .banner-area.top-pad-100 .content { padding-top: 200px; }
}

@media only screen and (max-width: 767px) {
    .banner-area.top-pad-100 .content { padding-top: 140px; }
}

.banner-area.top-pad-110 .content { padding-top: 110px; }

@media (max-width: 1023px) {
    .banner-area.top-pad-110 .content { padding-top: 200px; }
}

@media only screen and (max-width: 767px) {
    .banner-area.top-pad-110 .content { padding-top: 140px; }
}

.banner-area.top-pad-120 .content { padding-top: 120px; }

@media (max-width: 1023px) {
    .banner-area.top-pad-120 .content { padding-top: 200px; }
}

@media only screen and (max-width: 767px) {
    .banner-area.top-pad-120 .content { padding-top: 140px; }
}

.banner-area.top-pad-130 .content { padding-top: 130px; }

@media (max-width: 1023px) {
    .banner-area.top-pad-130 .content { padding-top: 200px; }
}

@media only screen and (max-width: 767px) {
    .banner-area.top-pad-130 .content { padding-top: 140px; }
}

.banner-area.top-pad-150 .content { padding-top: 150px; }

@media (max-width: 1023px) {
    .banner-area.top-pad-150 .content { padding-top: 200px; }
}

@media only screen and (max-width: 767px) {
    .banner-area.top-pad-150 .content { padding-top: 140px; }
}

.banner-area.auto-height { height: auto; }

.banner-area.auto-height div { height: auto; }

.banner-area.auto-height .content { padding: 200px 0; }

@media only screen and (max-width: 767px) {
    .banner-area.auto-height .content { padding: 60px 0; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner-area.auto-height .content { padding: 120px 0; }
}

.banner-area.auto-height .content .thumb { padding-left: 35px; }

@media (max-width: 991px) {
    .banner-area.auto-height .content .thumb { padding-left: 0; margin-top: 50px; }
}

.banner-area.auto-height.inc-header-transparent .content { padding-top: 250px; }

@media only screen and (max-width: 767px) {
    .banner-area.auto-height.inc-header-transparent .content { padding-top: 140px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner-area.auto-height.inc-header-transparent .content { padding-top: 220px; }
}

.banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .info { padding-top: 80px; }

.banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 250px; }

@media only screen and (max-width: 767px) {
    .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 30px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner-area.auto-height.inc-header-transparent.double-items.bottom-thumb .content .thumb { margin-top: 50px; }
}

.banner-area .content { position: relative; z-index: 9; -webkit-transition: all 500ms ease; transition: all 500ms ease; }

@media (max-width: 1023px) {
    .banner-area .content { padding: 120px 0; }
}

@media only screen and (max-width: 767px) {
    .banner-area .content { padding: 60px 0; }
}

.banner-area h4 { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translate3d(-15%, 0, 0); transform: translate3d(-15%, 0, 0); opacity: 0; visibility: hidden; }

.banner-area h2 { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; visibility: hidden; }

.banner-area p,
.banner-area ul { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; padding-right: 25%; margin: 0; visibility: hidden; }

@media (max-width: 1023px) {
    .banner-area p { padding-right: 0; }
}

.banner-area.text-center p { padding-left: 13%; padding-right: 13%; }

@media (max-width: 1023px) {
    .banner-area.text-center p { padding: 0; }
}

.banner-area .thumb { -webkit-transition: all 500ms ease; transition: all 500ms ease; opacity: 0; visibility: hidden; }

.banner-area .button { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; visibility: hidden; margin-top: 30px; }

.banner-area .banner-slide h4 { -webkit-transform: translateY(50%); transform: translateY(50%); }

.banner-area .banner-slide h2 { -webkit-transform: translateY(50%); transform: translateY(50%); }

.banner-area .banner-slide p,
.banner-area .banner-slide ul { -webkit-transform: translateY(50%); transform: translateY(50%); }

.banner-area .banner-slide .button { -webkit-transform: translateY(50%); transform: translateY(50%); }

.banner-area .banner-slide .swiper-slide.swiper-slide-active h4 { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1200ms; transition-delay: 1200ms; }

.banner-area .banner-slide .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1400ms; transition-delay: 1400ms; }

.banner-area .banner-slide .swiper-slide.swiper-slide-active p,
.banner-area .banner-slide .swiper-slide.swiper-slide-active ul { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1600ms; transition-delay: 1600ms; }

.banner-area .banner-slide .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1800ms; transition-delay: 1800ms; }

.banner-area.double-items .thumb { -webkit-transform: translateY(50%); transform: translateY(50%); }

.banner-area.double-items .swiper-slide.swiper-slide-active .thumb { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 500ms; transition-delay: 500ms; visibility: visible; opacity: 1; }

.banner-area.double-items.bottom-thumb .content { padding: 0; }

.banner-area.double-items.bottom-thumb .content .thumb { margin-top: 120px; }

@media only screen and (max-width: 767px) {
    .banner-area.double-items.bottom-thumb .content { padding: 50px 0; }

    .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 30px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner-area.double-items.bottom-thumb .content { padding: 120px 0; }

    .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 50px; }
}

.banner-area.zoom-effect .banner-thumb { -webkit-transition: 10s ease-out; transition: 10s ease-out; -webkit-transform: scale(1.1); transform: scale(1.1); position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; }

.banner-area.zoom-effect .swiper-slide.swiper-slide-active .banner-thumb { -webkit-transform: scale(1); transform: scale(1); }

.banner-area .swiper-notification { display: none; }

.banner-area .swiper-slide.swiper-slide-active h4 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; -webkit-transition-delay: 800ms; transition-delay: 800ms; }

.banner-area .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 1600ms; transition-delay: 1600ms; }

.banner-area .swiper-slide.swiper-slide-active p,
.banner-area .swiper-slide.swiper-slide-active ul { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 2400ms; transition-delay: 2400ms; }

.banner-area .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 3200ms; transition-delay: 3200ms; }

.banner-area.banner-style-two .swiper-slide.swiper-slide-active .button { -webkit-transition-delay: 2400ms; transition-delay: 2400ms; }

.banner-area .banner-items { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); }

.banner-area:hover .swiper-button-prev,
.banner-area:hover .swiper-button-next { opacity: 1; }

.banner-area:hover .swiper-button-prev { left: 30px; right: auto; }

.banner-area:hover .swiper-button-next { right: 30px; left: auto; }

.banner-area .swiper-button-prev,
.banner-area .swiper-button-next { height: auto; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; opacity: 0; }

.banner-area .swiper-button-prev::after,
.banner-area .swiper-button-next::after { font-size: 28px; color: var(--color-heading); }

.banner-area.navigation-circle .swiper-button-prev,
.banner-area.navigation-circle .swiper-button-next { height: 60px; width: 60px; line-height: 60px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; border: 1px solid var(--color-primary); }

.banner-area.navigation-circle .swiper-button-prev::after,
.banner-area.navigation-circle .swiper-button-next::after { font-size: 16px; }

.banner-area.navigation-right-bottom .swiper-button-prev,
.banner-area.navigation-right-bottom .swiper-button-next { left: auto; right: 30px; opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; bottom: 50px; border-radius: inherit; }

.banner-area.navigation-right-bottom .swiper-button-prev { right: 92px; }

.banner-area.navigation-between-bottom .content { padding-bottom: 105px; }

@media only screen and (min-width: 829px) and (max-width: 1023px) {
    .banner-area.navigation-between-bottom .content { padding-bottom: 220px; }
}

.banner-area.navigation-between-bottom .swiper-button-prev,
.banner-area.navigation-between-bottom .swiper-button-next { left: auto; right: 30px; opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; bottom: 30px; border-radius: inherit; }

.banner-area.navigation-between-bottom .swiper-button-prev { left: 30px; right: auto; }

@media only screen and (max-width: 830px) {
    .banner-area .swiper-button-prev,
    .banner-area .swiper-button-next { display: none; }
}

.banner-area.navigation-custom .swiper-button-prev::after { font-family: 'ElegantIcons'; content: "\23"; font-size: 22px; }

.banner-area.navigation-custom .swiper-button-next::after { font-family: 'ElegantIcons'; content: "\24"; font-size: 22px; }

.banner-area.navigation-text .swiper-button-prev,
.banner-area.navigation-text .swiper-button-next { opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; left: auto; right: 0; bottom: 0; display: inline-block; width: 150px; background: rgba(0, 0, 0, 0.2); text-align: center; height: 100px; line-height: 100px; }

@media only screen and (max-width: 830px) {
    .banner-area.navigation-text .swiper-button-prev,
    .banner-area.navigation-text .swiper-button-next { display: none; }
}

.banner-area.navigation-text .swiper-button-prev { right: 151px; }

.banner-area.navigation-text .swiper-button-prev::after { font-family: var(--font-heading); content: "Prev"; text-transform: uppercase !important; font-size: 16px; font-weight: 600; letter-spacing: 0.6px; }

.banner-area.navigation-text .swiper-button-next::after { font-family: var(--font-heading); content: "Next"; text-transform: uppercase !important; font-size: 16px; font-weight: 600; letter-spacing: 0.6px; }

.banner-area.navigation-icon-solid .swiper-button-prev::after,
.banner-area.navigation-icon-solid .swiper-button-next::after { font-size: 30px; }

.banner-area.navigation-custom-large .swiper-button-prev,
.banner-area.navigation-custom-large .swiper-button-next { min-width: 65px; height: 30px; margin: 0; }

.banner-area.navigation-custom-large .swiper-button-prev::after { font-family: "Font Awesome 5 Pro"; content: "\f104"; font-weight: 100; font-size: 30px; position: absolute; left: 8px; }

.banner-area.navigation-custom-large .swiper-button-prev::before { position: absolute; top: 50%; right: inherit; bottom: inherit; left: 12px; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--white); margin-top: -1px; }

.banner-area.navigation-custom-large .swiper-button-next::after { font-family: "Font Awesome 5 Pro"; content: "\f105"; font-weight: 100; font-size: 30px; position: absolute; right: 8px; }

.banner-area.navigation-custom-large .swiper-button-next::before { position: absolute; top: 50%; right: 12px; bottom: inherit; left: inherit; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--white); margin-top: -1px; }

.banner-area.navigation-right-botom .swiper-button-prev,
.banner-area.navigation-right-botom .swiper-button-next { position: absolute; left: auto; right: 30px; top: auto; bottom: 40px; opacity: 1; -webkit-transform: inherit; transform: inherit; }

.banner-area.navigation-right-botom .swiper-button-prev { right: 60px; }

.banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev,
.banner-area.navigation-right-botom.navigation-custom-large .swiper-button-next { bottom: 30px; }

.banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev { right: 100px; }

.banner-area .swiper-pagination { height: auto; bottom: 35px; }

.banner-area .swiper-pagination span.swiper-pagination-bullet { height: 4px; width: 50px; background: rgba(255, 255, 255, 0.5); opacity: 1; border-radius: inherit; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.banner-area .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: white; height: 7px; }

@media only screen and (max-width: 767px) {
    .banner-area.include-pagination .content { padding-bottom: 100px; }
}

.banner-area .swiper-pagination-fraction span { -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.banner-area .swiper-pagination-fraction span.swiper-pagination-current { font-size: 30px; font-family: var(--font-heading); font-weight: 600; }

/* ============================================================== 
    # Banner Custom Style
=================================================================== */

.banner-style-one-area { background-size: cover; background-position: bottom; position: relative; z-index: 1; }

.banner-style-one .content { padding-top: 220px; padding-bottom: 220px; }

.banner-shape-left-top { position: absolute; left: 0; top: 0; height: 60%; width: 100%; background-size: contain; background-repeat: no-repeat; opacity: 0.5; z-index: -1; }

.banner-shape-left-top img { width: 100%; }

.banner-style-one .thumb { padding-left: 20%; margin-right: -20%; position: relative; z-index: 1; margin-bottom: 150px; }

.banner-style-one .thumb .inner { position: absolute; left: 0; bottom: 80px; max-width: 200px; }

.banner-style-one .thumb .thumb-right { position: absolute; max-width: 250px; right: 50px; bottom: -80px; }

.banner-style-one .information { margin-top: -50px; }

.banner-style-one .thumb .shape { position: absolute; right: -100px; top: -100px; z-index: -1; max-width: 100px; }

.banner-style-one h2 { font-size: 50px; font-weight: 600; line-height: 1.3; margin-bottom: 20px; }

.banner-style-one p { padding-right: 15%; font-size: 18px; line-height: 1.7; opacity: 0.7; }

/* Banner Style Two */

.banner-style-two-area { background-size: contain; background-repeat: no-repeat; background-position: top center; position: relative; z-index: 1; }

.banner-shape-right-top { position: absolute; right: 0; top: 0; max-width: 40%; z-index: -1; opacity: 0.1; }

.banner-style-two .content { padding-top: 220px; padding-bottom: 120px; }

.banner-style-two .thumb { padding-right: 21%; margin-top: 80px; position: relative; }

.banner-style-two .thumb > img { border-radius: 30px; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); }

.banner-style-two h2 { font-weight: 600; font-size: 50px; }

.banner-style-two p { font-size: 20px; line-height: 1.7; }

.banner-style-two .thumb .inner-thumb { position: absolute; right: 0; top: 150px; max-width: 40%; }

.banner-app-features { right: 0; position: absolute; top: 50%; transform: translateY(-50%); }

.banner-app-features li { color: var(--color-heaidng); display: flex; align-items: center; margin-top: 25px; }

.banner-app-features li:first-child { margin-top: 0; }

.banner-app-features li h4 { color: var(--color-heading); margin: 0; font-weight: 600; }

.banner-app-features li i { display: inline-block; height: 80px; width: 80px; line-height: 76px; background: var(--color-optional); text-align: center; border-radius: 50%; font-weight: 100; font-size: 30px; margin-right: 20px; position: relative; z-index: 1; overflow: hidden; border: 3px solid var(--white); box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); }

.banner-app-features li i::after { position: absolute; left: -10px; bottom: -10px; content: ""; height: 60px; width: 60px; border-radius: 50%; background: var(--white); z-index: -1; opacity: 0.1; }

.banner-app-features li span { display: block; color: var(--color-heading); }

.banner-app-features li:nth-child(2n) i { background: var(--dark); }

.banner-style-two h2 strong { display: inline-block; font-weight: 600; position: relative; z-index: 1; }

.banner-style-two h2 strong::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: url(../img/shape/7.png); z-index: -1; background-repeat: no-repeat; background-position: center; background-size: contain; }

/* Banner Style Three */
.banner-style-three-area { background-size: cover; }

.banner-style-three .content { padding-top: 200px; padding-bottom: 120px; }

.banner-style-three .thumb { position: relative; z-index: 1; margin-top: 90px; margin-bottom: 140px; }

.banner-style-three .thumb .inner { position: absolute; right: -35%; top: -90px; max-width: 90%; }

.banner-style-three .thumb .thumb-right { position: absolute; left: -20%; bottom: -140px; max-width: 70%; }

.banner-style-three h2 { font-size: 55px; font-weight: 700; margin-bottom: 30px; }

.banner-style-three p { font-size: 20px; line-height: 1.7; font-weight: 400; }

.banner-style-three .video-play-button { margin-top: 0; }

.banner-style-three .information { margin-top: -50px; }


/* ============================================================== 
    # Feature
=================================================================== */

.bg-contain-right-bottom { background-size: 10%; background-repeat: no-repeat; background-position: right bottom; }

.feature-style-one { padding: 50px 30px; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); border-radius: 10px; margin-top: 30px; background: var(--white); }

.feature-style-one:first-child { margin-top: 0; }

.feature-style-one h4 { font-weight: 600; margin: 0; }

.feature-style-one p { margin: 0; margin-top: 15px; }

.feature-style-one i { display: inline-block; font-size: 60px; margin-bottom: 20px; color: var(--color-heading); }

.feature-style-one.active { position: relative; border: 1px solid var(--color-primary); z-index: 1; box-shadow: inherit; }

.feature-style-one.active i { color: var(--color-primary); margin-bottom: 30px; }

.feature-style-one.active::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--color-primary); z-index: -1; opacity: 0.1; }

.feature-style-one-box { position: relative; z-index: 1; }

.feature-shape { position: absolute; left: -25%; bottom: -30px; z-index: -1; max-width: 43%; transform: rotate(45deg); }

.list-check li { color: var(--color-heading); font-weight: 500; font-size: 18px; line-height: 1.6; position: relative; z-index: 1; padding-left: 30px; margin-top: 10px; }

.list-check { margin-top: 30px; }

.list-check li::after { position: absolute; left: 0; top: 0; content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 100; }

.list-check li:first-child { margin-top: 0; }

.description-layout-one h2 { margin-bottom: 25px; }

/* Feature Style Two */
.feature-style-two-area { background-size: cover; background-repeat: no-repeat; background-position: top center; position: relative; z-index: 1; }

.shape-right-top { position: absolute; right: 0; top: 0; z-index: -1; max-width: 20%; }

.feature-style-two-area .row { margin: 0 -25px; }

.feature-style-two-area .col-lg-6 { padding: 0 25px; }

.feature-style-two { background: var(--white); padding: 70px 50px; border-radius: 30px; display: flex; border: 2px solid #e3ecf6; overflow: hidden; position: relative; z-index: 1; margin-bottom: 50px; }

.feature-style-two i { display: inline-block; font-size: 80px; min-width: 120px; }

.feature-style-two .icon { width: 80px; min-width: 80px; margin-right: 30px; display: flex; flex-direction: column; justify-content: space-between; }

.feature-style-two a:hover { color: var(--color-optional); }

a.btn-arrow { display: inline-block; -webkit-text-stroke: 1px var(--color-optional); color: transparent; }

a.btn-arrow i { transform: rotate(45deg); position: relative; bottom: -30px; font-size: 70px; transition: all 0.35s ease-in-out; }


/* Feature Style Three */

.feature-style-three-area { background-size: 15%; background-repeat: no-repeat; background-position: bottom left; }

.feature-three-thumb { position: relative; padding-left: 100px; padding-top: 80px; background-size: contain; background-position: center; z-index: 1; }

.feature-three-thumb::after { position: absolute; left: 50%; top: 50%; content: ""; height: 650px; width: 650px; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; background: var(--white); opacity: 0.1; }

.feature-three-thumb img { border-radius: 10px; }

.feature-three-thumb img:nth-child(2) { position: absolute; left: 0; top: 0; max-width: 200px; box-shadow: 0 3px 25px 0 rgb(0 0 0 / 10%); background: var(--white); }

.feature-three-thumb .icon { display: inline-block; position: absolute; z-index: 1; right: 50px; top: 33px; }

.feature-three-thumb .icon::after { position: absolute; left: 50%; top: 50%; content: ""; height: 100px; width: 100px; background: var(--color-primary); z-index: -1; border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; }

.feature-three-thumb .icon i { display: inline-block; height: 80px; width: 80px; text-align: center; line-height: 80px; background: var(--bg-gradient); border-radius: 50%; font-size: 30px; color: var(--white); font-weight: 100; }

.feature-tab-navs { border: none; margin: 0; padding: 0; }

.feature-tab-navs .nav-link { margin: 0; width: 100%; border-radius: 5px; padding: 30px; font-weight: 600; font-size: 20px; text-align: left; border-color: rgba(255, 255, 255, 0.1); margin-top: 15px; transition: all 0.35s ease-in-out; color: var(--white); }

.feature-tab-navs .nav-link span { display: block; font-weight: 400; font-size: 16px; margin-top: 5px; }

.feature-tab-navs .nav-link:first-child { margin: 0; }

.feature-tab-navs .nav-link.active { background: var(--bg-gradient); border-color: rgba(255, 255, 255, 0.4); color: var(--white); }

.feature-tab-navs .nav-link::after { display: none; }


/* ============================================================== 
    # About Style
=================================================================== */
.about-thumb { position: relative; padding-left: 100px; padding-top: 80px; }

.about-thumb .user-fun-fact { position: absolute; left: 0; top: 0; background: var(--bg-gradient); padding: 50px; }

.about-thumb .fun-fact .counter { color: var(--white); }

.about-thumb .medium { color: var(--white); }

.about-thumb .user-ratings i { color: var(--white); }

.about-thumb .user-fun-fact .fun-fact { border-color: rgba(255, 255, 255, 0.4); }


/* ============================================================== 
    # Brand Style
=================================================================== */
.brand-style-one .swiper img { height: 40px; margin: auto; }

.brand-style-one-items { border-radius: 10px; position: relative; z-index: 1; background-size: 300px; background-repeat: no-repeat; background-position: right bottom; }

.brand-style-one h2 { margin-bottom: 30px; font-weight: 600; font-size: 30px; display: flex; align-items: center; justify-content: center; }

.brand-style-one h2 strong { display: inline-block; font-weight: 600; color: var(--color-primary); font-size: 50px; position: relative; z-index: 1; margin: 0 10px; }

.brand-style-one h2 strong::after { position: absolute; left: 50%; top: 50%; content: ""; height: 120%; width: 120%; background: url(../img/shape/7.png); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: -1; transform: translate(-50%, -50%); }


/* ============================================================== 
    # Soft Info Style
=================================================================== */

.soft-info-area { background-size: 51%; background-repeat: no-repeat; background-position: right bottom; overflow: hidden; }

.go-premium { background: var(--white); padding: 40px; border-radius: 10px; display: inline-block; position: absolute; left: 0; top: 0; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); max-width: 330px; }

.go-premium span { display: inline-block; color: var(--color-optional); text-transform: uppercase; font-weight: 600; margin-bottom: 10px; font-size: 15px; }

.go-premium h5 { font-weight: 600; margin-bottom: 15px; font-size: 20px; }

.user-lists { display: flex; align-items: center; margin-left: 15px; margin-top: 30px; }

.user-lists img,
.user-lists i { height: 50px; width: 50px; border: 2px solid var(--white); border-radius: 50% !important; box-shadow: 0 3px 10px 0 rgb(0 0 0 / 20%); position: relative; display: inline-block; background: var(--white); text-align: center; line-height: 46px; color: var(--color-optional); }

.user-lists li { margin-left: -15px; }

.soft-info-thumb img { max-width: 130%; }

.soft-info-thumb { position: relative; /*padding-left: 120px; padding-top: 100px;*/ }

.soft-info-thumb img { border-radius: 15px; }

.go-premium p { display: block; margin: 0; margin-top: 15px; font-weight: 600; }

.soft-info-list h3 { font-weight: 600; font-size: 24px; }

.soft-info-list ul { list-style: disc; }

.soft-info-list ul li { margin-top: 15px; position: relative; z-index: 1; padding-left: 25px; }

.soft-info-list ul li::after { position: absolute; left: 0; top: 10px; content: ""; height: 10px; width: 10px; background: var(--color-optional); border-radius: 3px; opacity: 0.6; }


/* ============================================================== 
    # Integrated Tools Style
=================================================================== */

.tools-integrations { background-size: contain; background-repeat: no-repeat; background-position: center; }

.tools-list .icon { height: 100px; width: 100px; background: var(--white); box-shadow: 0 3px 25px 0 rgb(0 0 0 / 10%); border-radius: 10px; font-size: 50px; position: relative; border: 2px solid #e3ecf6; display: flex; align-items: center; justify-content: center; flex-direction: column; }

.tools-list i.fa-google { color: #db3236; }

.tools-list i.fa-trello { color: #0079bf; }

.tools-list i.fa-salesforce { color: #1798c1; }

.tools-list i.fa-file-spreadsheet { color: #19a563; }

.tools-list i.fa-slack { color: #36C5F0; }

.tools-list i.fa-whatsapp { color: #4bc55a; }

.tools-list i.fa-jira { color: #2684ff; }

.tools-list i.fa-google-drive { color: #00ac47; }

.tools-list i.fa-video { color: #2d8cff; }

.tools-list i.fa-facebook-messenger { color: #0078FF; }

.tools-list li:nth-child(2) i { position: relative; }

.tools-list li:nth-child(4) i { top: 50px; }

.tools-list li:nth-child(7) i { top: -50px; }

.tools-list li:nth-child(10) i { top: 50px; }

.tools-list li { text-align: center; position: relative; display: inline-block; padding: 20px; }

.tools-list li:nth-child(2n) .icon { width: 180px; height: 180px; line-height: 180px; font-size: 80px; position: relative; }

.tools-list li:nth-child(3) .icon { top: 70px; }

.tools-list li:first-child .icon { top: 70px; }

.tools-list li:nth-child(4) .icon { top: 50px; }

.tools-list li:nth-child(10) .icon { top: 50px; }

.tools-list li:nth-child(5) .icon { position: relative; top: -50px; }

.tools-list li:nth-child(6) .icon { top: 50px; }

.tools-list li:nth-child(8) .icon { top: 50px; }

.tools-list li:nth-child(9) .icon { top: 50px; }

.tools-list .icon img { height: 45px; }

.tools-list li:nth-child(2n) .icon img { height: 70px; }

/* ============================================================== 
    # Choose Us Style
=================================================================== */
.choose-us-thumb img:first-child { max-width: 65%; float: left; }

.choose-us-thumb img:nth-child(2) { float: right; max-width: 30%; margin-top: 90px; border: 2px solid #eceaea; }

.choose-us-thumb img:nth-child(3) { float: right; max-width: 30%; margin-top: 30px; }

.choose-us-thumb img:nth-child(4) { position: absolute; left: -23%; bottom: -2px; max-width: 40%; border-bottom: 2px solid; }

.choose-us-thumb img:nth-child(5) { position: absolute; right: 0; bottom: 0; max-width: 35%; }

.choose-us-thumb { position: relative; z-index: 1; height: 100%; padding-bottom: 150px; float: left; width: 100%; border-bottom: 2px solid; }

.choose-us-thumb::after { position: absolute; left: 50%; top: 50%; content: ""; height: 500px; width: 500px; background: linear-gradient(62.5deg, transparent, rgba(237, 245, 255, 0.9)); z-index: -1; transform: translate(-50%, -50%); border-radius: 50%; }

.choose-us-thumb img:nth-child(6) { position: absolute; left: -115px; top: 4%; max-width: 100px; animation: UpDown 4s linear infinite; }

.choose-us-thumb img:nth-child(7) { position: absolute; right: 50%; bottom: -38px; max-width: 150px; }

.choose-us-thumb img:nth-child(8) { position: absolute; right: 30%; bottom: 90px; max-width: 133px; }


/* Choose Us Right Info */
.list-double li { display: flex; margin-top: 35px; position: relative; z-index: 1; padding-left: 37px; margin-left: 7px; }

.list-double li:first-child { margin-top: 0; border: none; }

.list-double li p { margin: 0; }

.list-double li h4 { font-weight: 600; }

.list-double li .fa-database { font-size: 47px; }

.list-double li::after { position: absolute; left: 0; top: 7px; content: ""; height: 15px; width: 15px; background: var(--bg-gray); z-index: 1; border-radius: 50%; }

.list-double li::before { position: absolute; left: -5px; top: 2px; content: ""; height: 25px; width: 25px; background: var(--color-optional); z-index: -1; border-radius: 50%; opacity: 0.3; }


/* ============================================================== 
    # Trial From Style
=================================================================== */

.free-trial-area { background-repeat: no-repeat; background-position: right bottom; }

.free-trial-style-one .title strong { display: inline-block; font-weight: 600; position: relative; z-index: 1; }

.free-trial-style-one .title strong::after { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; width: 100%; background: url(../img/shape/29.png); background-size: contain; background-repeat: no-repeat; background-position: bottom center; z-index: -1; }

.check-list li { position: relative; z-index: 1; padding-left: 30px; margin-top: 8px; font-weight: 500; }

.check-list li::after { position: absolute; left: 0; top: 5px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; height: 20px; width: 20px; text-align: center; line-height: 20px; border: 1px solid #e7e7e7; border-radius: 5px; font-size: 12px; }

.free-trial-style-one .call { border-top: 1px solid #dddddd; padding-top: 20px; margin-top: 25px; }

.free-trial-style-one .call p { margin-bottom: 5px; }

.free-trial-style-one .call a { font-size: 24px; font-weight: 600; }

.trial-form { padding: 70px; background: var(--white); border-radius: 10px; position: relative; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); margin-top: 30px; }

.trial-form img { margin-top: 40px; }

.trial-form .form-group { margin-bottom: 15px; }

.trial-form input,
.trial-form textarea { box-shadow: inherit; border: 2px solid #d9ebff; background: #f9fcff; padding-left: 25px; }

.trial-form button { display: block; width: 100%; }

.trial-form .shape { position: absolute; right: -84px; bottom: -120px; max-width: 100px; }

.trial-form h4 { font-weight: 600; font-size: 24px; margin-bottom: 30px; }

/* ============================================================== 
    # Software Details Style
=================================================================== */

.software-details-area { background-size: 17%; background-repeat: no-repeat; background-position: right top; }

.circle-process li { display: inline-block; margin-right: 50px; border-right: 1px solid #e7e7e7; padding-right: 50px; }

.circle-process li:last-child { margin-right: 0; padding-right: 0; border: none; }

.circle-process li .circle { position: relative; display: inline-block; text-align: center; }

.circle-process li .circle strong { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 600; color: var(--color-heading); font-size: 20px; }

.circle-process li h4 { margin: 0; font-weight: 600; margin-top: 15px; }

.soft-details-item { position: relative; z-index: 1; padding-right: 80px; margin-right: 60px; }

.soft-details-item .soft-details-info { position: absolute; right: 0; bottom: -160px; background: var(--white); padding: 50px; left: 250px; border: 1px solid #e7e7e7; border-radius: 10px; transition: all 0.55s ease-in-out; visibility: hidden; opacity: 0; }

.swiper-slide.swiper-slide-active .soft-details-item .soft-details-info { bottom: -200px; opacity: 1; visibility: visible; }

.soft-details-carousel .swiper-wrapper { padding-bottom: 200px; position: relative; }

.soft-details-info h4 { font-weight: 600; font-size: 24px; }

.list-circle li { position: relative; z-index: 1; padding-left: 20px; color: var(--color-heading); font-weight: 500; margin-top: 5px; }

.list-circle.secondary li { color: var(--color-paragraph); }

.list-circle li::after { position: absolute; left: 0; top: 10px; content: ""; height: 10px; width: 10px; background: var(--bg-gradient); border-radius: 3px; opacity: 0.7; }

.list-circle.secondary li::after { background: var(--color-optional); opacity: 1; height: 6px; width: 6px; border-radius: 50%; top: 12px; }

.soft-details-item thumb { border-radius: 10px; }

.shape-left-bottom { position: absolute; left: 15%; bottom: 130px; z-index: 1; }

.soft-details-item .thumb { overflow: hidden; border-radius: 10px; padding: 30px; background: #e4f6ed; transition: all 0.35s ease-in-out; }

.soft-details-item .thumb img { border-radius: 10px; border: 2px solid #ffffff; }

/* ============================================================== 
    # Services Style
=================================================================== */
.software-style-one-area { background-size: cover; background-repeat: no-repeat; background-position: top left; }

.services-style-one { padding: 60px 30px; background: var(--white); border-radius: 10px; overflow: hidden; position: relative; z-index: 1; }

.services-style-one.active::after { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; width: 100%; background: url(../img/shape/4.png); background-size: 20%; background-repeat: no-repeat; background-position: left bottom; z-index: -1; opacity: 0.3; }

.services-style-one.active { background: var(--dark); }

.services-style-one.active span, .services-style-one.active h4 a { color: var(--white); }

.services-style-one.active .icon i::after { background: linear-gradient(180deg, #443b3b 40%, #FBFBFD00 70%); }

.services-style-one .icon i { display: inline-block; color: var(--color-primary); position: relative; z-index: 1; margin-top: 30px; font-size: 65px; margin-bottom: 40px; }

.services-style-one.active .icon i { color: var(--color-primary); }

.services-style-one .icon i::after { position: absolute; left: 50%; top: -35px; content: ""; height: 160px; width: 160px; background: linear-gradient(180deg, #fff0f0 40%, #FBFBFD00 70%); z-index: -1; transform: translateX(-50%); border-radius: 50%; }

.services-style-one span { text-transform: uppercase; font-size: 13px; font-weight: 700; display: block; margin-bottom: 5px; }

.services-style-one h4 { font-size: 22px; margin-bottom: 0; }

.icon-btn { display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; background: var(--white); border: 1px solid #e7e7e7; border-radius: 50%; margin-top: 25px; position: relative; z-index: 9; }

.icon-btn i { font-weight: 400; }

/* Services Style TWo */
.services-style-two .item { padding: 50px 37px; padding-bottom: 45px; background: var(--white); border-radius: 10px; position: relative; }

.services-style-two .item i { display: inline-block; margin-bottom: 20px; font-weight: 100; height: 70px; width: 70px; line-height: 70px; text-align: center; border-radius: 8px; color: var(--color-primary); font-size: 36px; position: relative; z-index: 1; overflow: hidden; }

.services-style-two .item i::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--color-primary); z-index: -1; opacity: 0.15; }

.angle-btn { display: inline-block; }

.services-style-two .item h3 { font-size: 24px; }

.services-style-two .item .icon { margin-bottom: 30px; }

.services-style-two .item .icon img { height: 65px; }

.services-style-two .item .bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; }


/* Services Details */

.services-details-area .faq-style-one { padding: 80px; }

.services-details-area .thumb img { margin-bottom: 40px; }

.services-details-area h1,
.services-details-area h2,
.services-details-area h3,
.services-details-area h4,
.services-details-area h5,
.services-details-area h6 { font-weight: 600; }

.feature-list-item { margin: 0; padding: 0; list-style: none; }

.feature-list-item li { position: relative; z-index: 1; padding-left: 25px; margin-top: 8px; font-weight: 500; }

.feature-list-item li::after { position: absolute; left: 0; top: 1px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; color: var(--color-primary); font-weight: 500; font-size: 14px; }

.quick-contact-widget { background-size: cover; position: relative; z-index: 1; padding: 60px 37px; background-position: center center; overflow: hidden; }

.quick-contact-widget::before { position: absolute; left: -33%; bottom: -73px; content: ""; height: 300px; width: 300px; background: var(--color-primary); transform: skewX(50deg); opacity: 0.3; }

.quick-contact-widget .content { position: relative; z-index: 1; }

.quick-contact-widget h2 { font-weight: 600; margin-bottom: 10px; margin-top: 25px; }

.quick-contact-widget h4 a { font-weight: 400; border-bottom: 2px solid; }

.quick-contact-widget i { display: inline-block; height: 60px; width: 60px; line-height: 60px; font-weight: 100; background: #ffffff; color: var(--color-primary); font-size: 22px; border-radius: 50%; margin-bottom: 40px; position: relative; }

.quick-contact-widget i::after { position: absolute; left: -10px; top: -10px; content: ""; height: 80px; width: 80px; background: #ffffff; z-index: -1; border-radius: 50%; opacity: 0.8; }

.quick-contact-widget::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--dark); z-index: -1; opacity: 0.6; border-radius: 7px; }

.quick-contact-widget .btn-sm { font-size: 16px; }

.services-sidebar .single-widget { margin-top: 50px; }

.services-sidebar .single-widget .widget-title { display: block; font-weight: 600; margin-bottom: 30px; margin-top: -5px; position: relative; text-transform: capitalize; z-index: 1; display: inline-block; padding-bottom: 15px; }

.services-sidebar .single-widget .widget-title::after { position: absolute; left: 0; bottom: 0; content: ""; height: 2px; width: 50px; border-bottom: 2px solid var(--color-primary); }

.services-sidebar .single-widget h4.widget-title { font-size: 22px; }

.services-sidebar .single-widget:first-child { margin-top: 0; }

.widget-brochure ul { padding-left: 0; list-style: none; }

.widget-brochure ul li a { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 15px; background: #ffffff; padding: 20px 25px; border-radius: 5px; border: 2px solid #cddff7; color: var(--color-heading); }

.widget-brochure ul li a:hover { color: var(--color-primary); }

.widget-brochure ul li:first-child a { margin-top: 0; }

.widget-brochure ul li:first-child a,
.widget-brochure ul li a:hover { background: var(--dark); border-color: transparent; color: var(--white); }

.widget-brochure ul li i { font-size: 35px; font-weight: 100; margin-right: 16px; display: inline-block; text-align: center; border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.widget-brochure ul li:hover i,
.widget-brochure ul li:first-child i { color: var(--white); }

.services-list-widget ul { list-style: none; overflow: hidden; margin: 0; padding: 0; }

.services-list-widget ul li { display: block; }

.services-list-widget ul li a { display: block; padding: 18px 25px; padding-right: 55px; border-bottom: 1px solid #c8e0ff; position: relative; z-index: 1; overflow: hidden; color: var(--color-heading); background: #f1f4f8; font-weight: 500; }

.services-list-widget ul li a::before { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 0; background: var(--bg-gradient); background-size: 220% 150%; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; z-index: -1; }

.services-list-widget ul li a:hover { color: #ffffff; }

.services-list-widget ul li a:hover::before { width: 100%; }

.services-list-widget ul li.current-item a { color: #ffffff; }

.services-list-widget ul li.current-item a::after { position: absolute; right: 20px; top: 50%; content: "\f061"; border-radius: 50%; font-family: "Font Awesome 5 Pro"; font-weight: 500; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 17px; }

.services-list-widget ul li.current-item a::before { width: 100%; }

@media only screen and (max-width: 767px) {
    .services-more .row { margin-top: -20px; }
}

.services-more .item { padding: 50px 35px; border: 1px solid var(--color-primary); margin-top: 15px; border-radius: 10px; position: relative; }

.services-more .item::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--bg-gradient); z-index: -1; opacity: 0.1; }

.services-more .item i::before { line-height: inherit; }

@media only screen and (max-width: 767px) {
    .services-more .item { margin-top: 30px; text-align: center; }
}

.services-more .item i { display: inline-block; font-size: 40px; margin-bottom: 30px; background: var(--color-primary); color: var(--white); height: 70px; width: 70px; text-align: center; line-height: 70px; border-radius: 50%; }

.services-more .item a { color: var(--color-heading); }

.services-more .item a:hover { color: var(--color-primary); }

.services-more .item p { margin: 0; }

.services-details-area .faq-style-one button.accordion-button { background: #fbfbfb !important; border: 1px solid #f3ecec !important; padding: 20px 25px !important; padding-right: 60px !important; }

.services-details-items .faq-style-one button.accordion-button::after { top: 15px; }

.service-single-thumb { position: relative; z-index: 1; }

.service-single-thumb img { margin-bottom: 40px; }

/* ============================================================== 
    # Team Style
=================================================================== */

.team-style-one-area.default-padding { padding-bottom: 70px; }

.team-box.default-padding.bottom-less { padding-bottom: 70px; }

.team-box { position: relative; z-index: 1; }

.team-box::after { position: absolute; right: 0; top: 0; content: ""; height: 50%; width: 200%; background: var(--bg-gradient); z-index: -1; border-radius: 10px; }

.team-style-one .item { position: relative; z-index: 1; }

.team-style-one .item img { border-radius: 8px; margin-bottom: 20px; text-align: right; }

.team-style-one .item .thumb { position: relative; }

.team-style-one .team-social .share-link { position: relative; z-index: 1; padding-right: 20px; }

.team-style-one .team-social .share-link > i { display: inline-block; height: 45px; background: var(--bg-gradient); line-height: 45px; width: 45px; text-align: center; cursor: pointer; color: var(--white); border-radius: 0 0 7px 7px; }

.team-style-one .team-social .share-link ul { display: flex; list-style-type: none; grid-gap: 5px; padding: 0; margin: 0; position: absolute; left: 0; top: 3px; z-index: 0; opacity: 0; pointer-events: none; transition: all 0.3s ease-in-out 0s; }

.team-style-one .team-social .share-link:hover ul { left: 58px; opacity: 1; pointer-events: auto; }

.team-style-one .team-social .share-link ul li { display: inline-block; margin: 0; }

.team-style-one .team-social .share-link ul li a { display: inline-block; height: 40px; width: 40px; line-height: 42px; background: var(--white); text-align: center; border-radius: 50%; }

.team-style-one .team-social { display: flex; flex-direction: column; position: absolute; left: 30px; bottom: 45px; }

.team-style-one .team-social > a { display: inline-block; background: var(--white); height: 45px; width: 46px; text-align: center; line-height: 45px; position: relative; left: -1px; border-radius: 7px 7px 0 0; color: var(--color-primary); }

.team-style-one h4 { margin-bottom: 3px; }



/* ============================================================== 
     # Team Single  
=================================================================== */
.team-right-info h2 { font-weight: 600; }

.team-right-info span { display: block; text-transform: uppercase; color: var(--color-primary); font-weight: 500; margin-bottom: 25px; }

.team-right-info ul { margin-top: 25px; border-top: 1px solid #e7e7e7; padding-top: 17px; }

.team-right-info ul li { margin-top: 10px; }

.team-right-info ul li a { font-weight: 500; }

.team-right-info ul li strong { font-weight: 600; }

.team-right-info ul li a { font-weight: 600; }

.team-right-info ul li a:hover { color: var(--color-primary); }

.team-right-info .social { display: flex; margin-top: 25px; font-weight: 600; align-items: center; }

.team-right-info .social h4 { font-weight: 600; margin-bottom: 0; margin-right: 25px; }

.team-right-info .social ul { margin: 0; padding: 0; border: none; }

.team-right-info .social .share-link { position: relative; z-index: 1; margin-left: 15px; padding-right: 20px; }

.team-right-info .social .share-link > i { display: inline-block; height: 45px; background: var(--white); box-shadow: 0 0 10px #cccccc; line-height: 45px; width: 45px; text-align: center; border-radius: 50%; cursor: pointer; color: var(--color-primary); }

.team-right-info .social ul { display: flex; list-style-type: none; grid-gap: 10px; padding: 0; margin: 0; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0; pointer-events: none; transition: all 0.3s ease-in-out 0s; }

.team-right-info .social .share-link:hover ul { left: 58px; opacity: 1; pointer-events: auto; }

.team-right-info .social ul li { display: inline-block; margin: 0; }

.team-right-info .social ul li a { display: inline-block; height: 45px; width: 45px; line-height: 47px; background: #f1f1f1; text-align: center; border-radius: 50%; }

.team-single-area .bottom-info h2 { font-weight: 600; margin-bottom: 30px; }

.team-single-area .bottom-info p:last-child { margin-bottom: 0; }

.skill-items .progress-box { margin-bottom: 30px; }

.skill-items .progress-box:last-child { margin-bottom: 0; }

.skill-items .progress-box h5 { font-weight: 600; margin-bottom: 5px; text-align: left; position: relative; z-index: 1; }

.skill-items .progress-box h5 span { position: absolute; font-size: 50px; line-height: 1; top: -21px; left: 0; z-index: -1; opacity: 0.05; font-weight: 600; }

.skill-items .skill-items { margin-top: 40px; }

.skill-items .progress-box .progress { background: transparent; border-bottom: 3px solid #dbdbdb; box-shadow: inherit; border-radius: inherit; overflow: inherit; }

.skill-items .progress-box .progress .progress-bar { height: 7px; background: var(--bg-gradient); top: 11px; position: relative; overflow: inherit; background-size: 289% auto; }

.skill-items .progress-box .progress .progress-bar span { position: absolute; right: 0; top: -40px; display: block; font-size: 17px; color: var(--color-heading); font-weight: 600; }

.qualification-item { display: inline-block; border: 2px solid #e3ecf6; padding: 38px 30px; border-radius: 5px; }

.qualification-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 30px; }

.qualification-item i { display: inline-block; font-size: 45px; margin-bottom: 20px; color: var(--color-primary); }

.qualification-item h4 { margin: 0; font-weight: 600; }

.team-right-info { padding: 100px; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); position: relative; top: 90px; margin-left: -20%; background: var(--white); z-index: 1; margin-bottom: 35px; }

/* ============================================================== 
    # App Type Style
=================================================================== */
.app-type-style-one { padding: 50px; padding-bottom: 0; background: var(--white); overflow: hidden; border-radius: 10px; }

.app-type-style-one.active { background: var(--bg-gradient); color: var(--white); }

.app-type-style-one.active h3 { color: var(--white); }

.app-type-style-one.active .list-circle li { color: var(--white); opacity: 1; font-weight: 400; }

.app-type-style-one.active .list-circle li::after { background: var(--white); }

.app-type-style-one h3 { font-weight: 600; margin-bottom: 25px; }

.app-type-style-one img { border-radius: 10px 10px 0 0; margin-top: 40px; }

.app-type-style-one .btn.btn-dark::after { background: var(--white); }

.app-type-style-one .btn.btn-dark:hover { color: var(--color-heading); }

.app-type-style-one .price { font-weight: 600; margin-bottom: 0; line-height: 1; font-size: 60px; }

.app-type-style-one.active .price { color: var(--white); }

.app-type-style-one .price strong { font-weight: 500; color: var(--color-optional); }

.app-type-style-one.active .price strong { color: var(--white); }

.app-type-style-one .price sub { font-size: 15px; font-weight: 400; left: -5px; bottom: 0; }

.app-type-style-one .price sup { font-size: 25px; top: -18px; }


/* ============================================================== 
    # Current User Style
=================================================================== */

.current-user-area { position: relative; z-index: 1; }

.shape-left-bottom-extra { position: absolute; left: 0; bottom: 20%; max-width: 6%; z-index: -1; }

.fun-fact .counter { position: relative; display: flex; align-items: center; font-size: 60px; font-weight: 600; color: var(--color-heading); line-height: 1; margin-bottom: 5px; }

.user-fun-fact.secondary .fun-fact .counter { color: var(--color-optional); }

.fun-fact .medium { font-weight: 400; }

.user-fun-fact .fun-fact { border-top: 1px solid #e7e7e7; margin-top: 20px; padding-top: 20px; }

.user-fun-fact .fun-fact:first-child { margin-top: 0; padding-top: 0; border: none; }

.active-user-banner { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center; grid-column-gap: 40px; grid-row-gap: 40px; }

.active-user-banner .item { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.active-user-banner .item img { margin-top: 40px; border-radius: 10px; box-shadow: 0 10px 30px 0 rgb(44 130 237 / 10%); }

.active-user-banner .item img:first-child { margin-top: 0; }

.active-user-info { position: relative; z-index: 1; padding: 30px; }

.shape-globe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 80%; width: 80%; z-index: -1; display: flex; flex-direction: column; justify-content: center; }

.shape-globe img { animation: rotate-animation 30s infinite linear; }

.user-ratings i { color: var(--color-primary); }

.user-ratings { margin-bottom: 8px; }

.fun-fact.flex { display: flex; align-items: center; }

.fun-fact.flex img { height: 90px; margin-right: 30px; border-right: 1px solid #d8d5d5; padding-right: 30px; }


/* Animation Rotation */
@keyframes rotate-animation {
    0% { transform: rotate(0deg); }

    50% { transform: rotate(180deg); }

    100% { transform: rotate(360deg); }
}


/* ============================================================== 
    # Pricing Style
=================================================================== */
.pricing-style-one { overflow: hidden; padding: 0; border-right: 2px solid var(--bg-gray); background: var(--white); }

.pricing-style-one-items { margin-right: 15px; margin-left: 15px; position: relative; border-radius: 10px; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); margin-top: 30px; margin-bottom: 18px; }

.pricing-style-one .item { background: var(--white); }

.pricing-style-one .pricing-header { padding: 50px 30px; background: var(--dark); }

.pricing-style-one:last-child { border: none; padding-left: 15px; }

.pricing-style-one .pricing-content { padding: 45px 30px; }

.pricing-style-one.active { transform: scale(1.1); border: 2px solid var(--color-primary); border-radius: 10px; }

.pricing-style-one.active .pricing-header { background: var(--bg-gradient); padding: 53px 30px; }

.pricing-style-one:first-child { border-radius: 10px 0 0 10px; }

.pricing-style-one:last-child { border-radius: 0 10px 10px 0; }

.pricing-style-one .pricing-header h4 { text-transform: capitalize; font-weight: 600; color: var(--white); }

.pricing-style-one .pricing-header p { margin-bottom: 0; color: #cccccc; }

.pricing-style-one.active .pricing-header p { color: var(--white); }

.pricing-style-one span { display: block; font-weight: 500; color: var(--color-heading); margin-top: 15px; font-size: 15px; }

.pricing-style-one .pricing-content h2 { font-weight: 600; font-size: 42px; }

.pricing-style-one .pricing-content h2 strong { font-weight: 600; color: var(--color-secondary); }

.pricing-style-one .pricing-content h2 sub { font-size: 15px; font-weight: 400; left: -5px; }

.pricing-style-one .pricing-content h2 sup { font-size: 25px; top: -18px; }

.pricing-style-one li { display: flex; margin-top: 7px; }

.pricing-style-one li i { display: inline-block; font-weight: 100; margin-right: 10px; position: relative; top: 7px; font-size: 15px; }

.pricing-style-one li:first-child { margin-top: 0; }

/* Pricing Style Two */
.pricing-style-two-area { background-size: contain; background-repeat: no-repeat; background-position: center top; }

.pricing-style-two .item { background: var(--white); }

.pricing-style-two.active .item { background: var(--bg-gradient-reverse); overflow: hidden; border-radius: 10px; }

.pricing-style-two .pricing-header { background: var(--bg-gray); padding: 30px 50px; }

.pricing-style-two .pricing-header h4 { margin-bottom: 10px; font-weight: 600; }

.pricing-style-two .pricing-description p { color: var(--color-paragraph) }
.pricing-style-two.active .pricing-description p { color: #fff }

.pricing-style-two.active .pricing-header h4,
.pricing-style-two.active .pricing-header h2 { color: var(--white); }

.pricing-style-two .pricing-header h2 { margin: 0; line-height: 1; }

.pricing-style-two .pricing-header h2 { font-weight: 600; font-size: 60px; }

.pricing-style-two .pricing-header h2 strong { font-weight: 500; color: var(--color-optional); }

.pricing-style-two .pricing-header h2 sub { font-size: 15px; font-weight: 400; left: -5px; bottom: 0; }

.pricing-style-two .pricing-header h2 sup { font-size: 25px; top: -18px; }

.pricing-style-two .pricing-content { padding: 50px; }

.pricing-style-two.active .pricing-header { border-bottom: 1px solid rgba(255, 255, 255, 0.4); background: transparent; }

.pricing-style-two { padding: 0; }

.pricing-style-two-items { overflow: hidden; background: var(--bg-gray); border-radius: 10px; /* box-shadow: 0 0 30px 0 rgb(0 57 57 / 20%); */ border: 1px solid #e7e7e7; }

.pricing-style-two.active .pricing-content p,
.pricing-style-two.active .pricing-content li { color: var(--white); }

.pricing-style-two li { margin-top: 10px; display: flex; }

.pricing-style-two li i { display: inline-block; font-weight: 100; font-size: 15px; margin-right: 11px; position: relative; top: 7px; }

.pricing-style-two:first-child .item { padding-left: 15px; }

.top-shape-gray { position: relative; z-index: 1; }

.top-shape-gray::after { position: absolute; left: 0; top: 0; content: ""; height: 510px; width: 100%; background: var(--dark); z-index: -1; }

.pricing-badge { position: absolute; right: -75px; top: -80px; }

.pricing-badge h5 { display: inline-block; margin: 0; font-weight: 600; }

.pricing-badge img { height: 40px; transform: rotate(5deg); display: block; }


/* ============================================================== 
     # Gallery 
=================================================================== */

.gallery-area .magnific-mix-gallery { margin: -15px; }

.gallery-items.colums-3 .gallery-item { float: left; padding: 15px; width: 33.3333%; }

.gallery-items.colums-2 .gallery-item { float: left; padding: 15px; width: 50%; }

.gallery-items.colums-4 .gallery-item { float: left; padding: 15px; width: 25%; }

.gallery-style-one { overflow: hidden; border-radius: 15px; }

.gallery-style-one .content { padding: 30px; border: 1px solid #e7e7e7; border-radius: 0 0 15px 15px; }

.gallery-list { list-style: none; margin: 0; padding: 0; }

.gallery-list li { display: inline-block; margin-right: 15px; font-weight: 600; position: relative; z-index: 1; color: #888585; }

.gallery-list li::after { position: absolute; right: -12px; top: 50%; content: ""; height: 5px; width: 5px; background: #aaa3a3; z-index: -1; border-radius: 50%; margin-top: -1px; }

.gallery-list li:last-child::after { display: none; }

.gallery-list li:last-child { margin: 0; }

.gallery-style-one h4 { margin-bottom: 10px; }

.gallery-style-one .thumb { overflow: hidden; position: relative; z-index: 1; }

.gallery-style-one .thumb a { position: absolute; left: 60px; bottom: 30px; height: 50px; width: 50px; line-height: 50px; text-align: center; background: var(--bg-gradient); color: var(--white); border-radius: 50%; opacity: 0; visibility: hidden; z-index: 9; }

.gallery-style-one:hover .thumb a { left: 30px; opacity: 1; visibility: visible; }

.gallery-style-one .thumb::after { position: absolute; left: 0; top: 0; content: ""; height: 230px; width: 100%; background: var(--bg-gradient); transform: skewY(48deg); transition: all 0.35s ease-in-out; opacity: 0; }

.gallery-style-one:hover .thumb::after { top: 100%; opacity: 0.6; background: var(--dark); }

.gallery-style-one .thumb::before { position: absolute; left: 0; bottom: -100px; content: ""; height: 50%; width: 100%; background: var(--bg-gradient); transform: skewY(48deg); transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; }

.gallery-style-one:hover .thumb::before { height: 200%; bottom: 0; opacity: 0.7; visibility: visible; }

.gallery-project-basic-info { background: var(--dark); position: relative; top: -100px; margin-bottom: -100px; padding: 50px; z-index: 1; overflow: hidden; }

.gallery-project-basic-info::after { position: absolute; right: -100px; bottom: 0; content: ""; height: 150px; width: 150px; background: var(--bg-gradient); z-index: -1; transform: skewX(-40deg); }

.gallery-project-basic-info li { display: flex; color: var(--white); font-weight: 500; border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 20px; padding-top: 20px; }

.gallery-project-basic-info li i { display: inline-block; height: 55px; width: 55px; line-height: 55px; text-align: center; background: rgba(255, 255, 255, 0.1); color: var(--white); border-radius: 50%; margin-right: 20px; font-weight: 100; font-size: 20px; }

.gallery-project-basic-info li span { display: block; opacity: 0.7; font-weight: 300; }

.gallery-project-basic-info li:first-child { margin-top: 0; padding-top: 0; border: none; }

.project-thumb img { margin-bottom: 50px; }

.project-details-items h1,
.project-details-items h2,
.project-details-items h3,
.project-details-items h4,
.project-details-items h5,
.project-details-items h6 { font-weight: 600; }

.project-details .check-list { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 40px; }

.project-details .check-list li { padding-left: 0; margin-top: 0; }

.project-details .check-list li::after { height: 35px; width: 35px; text-align: center; line-height: 35px; top: 1px; border-radius: 50%; background: #f9f9f9; font-size: 17px; display: none; }



/* ============================================================== 
    # Testimonails Style
=================================================================== */

.testimonials-area { background-size: 70%; background-repeat: no-repeat; background-position: left bottom; overflow: hidden; }

.testimonial-style-one { background: var(--white); padding: 60px; border-radius: 10px; position: relative; z-index: 1; }

.testimonial-style-one::after { position: absolute; right: -15px; bottom: -15px; content: ""; top: 30px; left: 30px; background: var(--white); z-index: -1; border-radius: 10px; opacity: 0.6; }

.carousel-stage-right { padding-bottom: 15px; padding-right: 15px; }

.testimonial-style-one .thumb { position: relative; z-index: 1; }

.testimonial-style-one .thumb img { border-radius: 50%; margin-right: 30px; height: 80px; }

.testimonial-style-one h4 { font-weight: 600; margin-bottom: 5px; font-size: 24px; }

.testimonial-style-one .privider { display: flex; align-items: center; margin-top: 30px; }

.testimonial-style-one p { font-size: 24px; line-height: 1.7; }

.testimonial-style-one .thumb::after { position: absolute; right: 17px; top: 50%; content: ""; height: 35px; width: 35px; background-image: url(../img/shape/quote.png); background-repeat: no-repeat; background-color: var(--color-primary); border-radius: 50%; background-position: center; transform: translateY(-50%); }

.testimonial-button-prev,
.testimonial-button-next { height: 45px; width: 45px; line-height: 45px; background: var(--white); position: relative; z-index: 1; }

.testimonial-button-next::after { position: absolute; left: 50%; top: 50%; content: "\f061"; font-family: "Font Awesome 5 Pro"; transform: translate(-50%, -50%); margin-top: 1px; }

.testimonial-button-prev::after { position: absolute; left: 50%; top: 50%; content: "\f060"; font-family: "Font Awesome 5 Pro"; transform: translate(-50%, -50%); margin-top: 1px; }

.testimonial-nav { display: flex; position: absolute; left: 0; top: -100px; z-index: 999; justify-content: right; padding: 0 30px; }

@media (min-width: 1250px) {
    .testimonial-nav { width: 1250px; }
}

@media (min-width: 1200px) {
    .testimonial-nav { width: 1140px; }
}

@media (min-width: 992px) {
    .testimonial-nav { width: 960px; }
}

.testimonail-item-one-items { position: relative; z-index: 1; }

.testimonail-item-one-items::after { position: absolute; right: -20%; bottom: 170px; content: ""; height: 100%; width: 70%; background: var(--bg-gradient); z-index: -1; border-top-left-radius: 30px; }

.testimonial-nav > div { margin-left: 10px; border-radius: 50%; }

/* Testimonial Style Two */

.testimonial-style-two .item { padding: 50px; background: var(--white); border-radius: 10px; position: relative; z-index: 1; }

.testimonial-style-two .item::after { position: absolute; left: 50px; right: 50px; bottom: -22px; background: var(--white); height: 100%; z-index: -1; content: ""; border-radius: 0 0 10px 10px; opacity: 0.6; }

.testimonial-style-two .item p { font-size: 25px; line-height: 1.6; }

.testimonial-style-two .item .thumb { position: absolute; left: 50%; bottom: -70px; transform: translateX(-50%); background: var(--white); border-radius: 50%; padding: 5px; border: 20px solid var(--bg-gray); }

.testimonial-style-two .item .thumb::after { position: absolute; left: 50%; bottom: -10px; content: ""; height: 35px; width: 35px; background-image: url(../img/shape/quote.png); background-repeat: no-repeat; background-color: var(--color-primary); border-radius: 50%; background-position: center; transform: translateX(-50%); }

.secondary .testimonial-style-two .item .thumb::after { background-color: var(--color-optional); }

.testimonial-style-two .item .thumb img { height: 70px; width: 70px; border-radius: 50%; }

.testimonial-style-two-carousel .swiper-wrapper { padding-bottom: 60px; }

.testimonial-style-two .item .provider h4 { font-weight: 600; margin-bottom: 5px; font-size: 24px; }

.testimonial-style-two .item .provider { margin-bottom: 30px; margin-top: 20px; display: inline-block; min-width: 50%; }



/* ============================================================== 
    # Process Style
=================================================================== */

.process-style-onea-rea { background-size: contain !important; background-repeat: no-repeat; background-position: center !important; }

.process-style-one { height: 300px; width: 300px; background: #f2f7ff; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; padding: 50px; margin: auto; text-align: center; }

.process-style-one h4 { font-weight: 600; margin: 0; }

.shape-center { max-width: 55%; margin: auto; }

.process-style-one img { height: 100px; margin-bottom: 20px; }

.process-fun-fact { display: flex; align-items: center; justify-content: space-between; position: relative; top: -200px; margin-bottom: -200px; text-align: left; }

.process-fun-fact::after { position: absolute; left: 20%; right: 20%; content: ""; height: 1px; border-top: 2px dashed var(--color-optional); z-index: -1; }


/* ============================================================== 
    # Faq Style
=================================================================== */
.faq-style-one { background: var(--bg-gray); padding: 80px; padding-bottom: 0; position: relative; z-index: 1; border-bottom: 1px solid var(--bg-gray); }

.shape-arro { position: absolute; left: -85px; top: -100px; max-width: 200px; }

.faq-tab-navs { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: none; position: relative; z-index: 1; margin-top: 60px; }

.faq-tab-navs .nav-link { border: none; margin: 0; padding: 20px; color: var(--color-heading); background: var(--white); transition: all 0.35s ease-in-out; border-radius: 10px 10px 0 0; }

.faq-tab-navs::before, .faq-tab-navs::after { display: none; }

.faq-tab-navs::after { position: absolute; left: -100px; right: -100px; bottom: 0; content: ""; background: var(--dark); height: 100%; }

.faq-tab-navs .nav-link::after { display: none; }

.faq-tab-navs .nav-link.active { background: var(--dark); color: var(--white); }

.faq-tab-navs .nav-link:hover { background: var(--color-primary); color: var(--white); }

.faq-style-one button.accordion-button { color: var(--color-heading); font-size: 18px; font-weight: 600; padding: 25px 0 !important; background: transparent !important; padding-right: 60px !important; position: relative; box-shadow: inherit; border: none; border-bottom: 2px solid var(--color-heading) !important; border-radius: inherit !important; }

.faq-style-one button.accordion-button::after { background: transparent; content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: 100; font-size: 25px; position: absolute; top: 22px; right: 25px; }

.faq-style-one button.accordion-button::after,
.faq-style-one button.accordion-button:hover::after { transform: inherit !important; }

.faq-style-one button.accordion-button:not(.collapsed)::after { -webkit-transform: inherit; transform: inherit; content: "\f106"; }

.faq-style-one button.accordion-button:focus { background: transparent; color: var(--color-heading); border: none; -webkit-box-shadow: inherit; box-shadow: inherit; padding-left: 0; font-weight: 600; }

.faq-style-one .accordion-item { background: transparent; border: none; }

.faq-style-one .accordion-body { padding-left: 0; padding-top: 25px; }

.faq-style-one-content { margin-top: -15px; }

.faq-style-one .accordion-body p:last-child { margin: 0; }

.faq-style-one.bg-light { padding: 0; }

.faq-style-one.bg-light .faq-tab-navs .nav-link { background: var(--bg-gray); }

.faq-style-one.bg-light .faq-tab-navs .nav-link.active { background: var(--dark); color: var(--white); }

.faq-style-one.bg-light .faq-tab-navs .nav-link:hover { background: var(--color-primary); color: var(--white); }

/* Faq Style Two */

.faq-style-two-area { background-size: 7%; background-repeat: no-repeat; background-position: left bottom; }

.faq-style-area { background-size: 25%; background-repeat: no-repeat; background-position: left bottom; }

.faq-style-two { position: relative; z-index: 1; }

.faq-style-two button.accordion-button { color: var(--color-heading); font-size: 18px; font-weight: 600; padding: 25px 0 !important; background: transparent !important; padding-right: 60px !important; position: relative; box-shadow: inherit; border: none; border-bottom: 2px solid var(--color-heading) !important; border-radius: inherit !important; }

.faq-style-two button.accordion-button::after { background: transparent; content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: 100; font-size: 25px; position: absolute; top: 22px; right: 25px; opacity: 1; left: inherit; z-index: 1; transform: inherit; }

.faq-style-two button.accordion-button:not(.collapsed)::after { -webkit-transform: inherit; transform: inherit; content: "\f106"; }

.faq-style-two button.accordion-button:focus { background: transparent; color: var(--color-heading); border: none; -webkit-box-shadow: inherit; box-shadow: inherit; padding-left: 0; font-weight: 600; }

.faq-style-two .accordion-item { background: transparent; border: none; }

.faq-style-two .accordion-body { padding-left: 0; padding-top: 25px; }

.faq-style-two-content { margin-top: -15px; }

.faq-style-two .accordion-body p:last-child { margin: 0; }

/* ============================================================== 
    # Contact Style
=================================================================== */
.contact-style-one-info { padding: 50px; position: relative; z-index: 1; }

.contact-style-one-info h2 { font-weight: 600; margin-top: -8px; }

.contact-style-one-info .title { font-size: 20px; margin-top: 3px; }

.contact-style-one-info li { display: flex; margin-top: 20px; border-top: 1px dashed rgba(255, 255, 255, 0.6); padding-top: 20px; }

.contact-style-one-info li i { display: inline-block; font-weight: 100; font-size: 20px; height: 60px; width: 60px; text-align: center; line-height: 60px; background: var(--dark); color: var(--white); border-radius: 50%; margin-right: 20px; }

.contact-style-one-info li h4 { margin-bottom: 3px; }

.contact-style-one-info li p { margin: 0; }

.contact-style-one-info li a { font-weight: 400; }

.contact-style-one-info li:first-child { margin-top: 0; padding-top: 0; border: none; }

.contact-style-one-info h3 { font-weight: 600; }

.contact-area { background-size: 41%; background-repeat: no-repeat; background-position: right bottom; }

.contact-form-style-one .sub-title { margin-bottom: 10px; }

.contact-form-style-one input,
.contact-form-style-one textarea { border: none; border-bottom: 1px solid #e7e7e7; border-radius: inherit; padding: 0; box-shadow: inherit; }

.contact-form-style-one .form-group { margin-bottom: 30px; }

.contact-form-style-one textarea { min-height: 180px; }

.contact-form-style-one { padding: 80px; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); background: var(--white); position: relative; z-index: 1; }

.contact-form-style-one .shape-right-bottom { position: absolute; right: -110px; bottom: -50px; max-width: 170px; }

.contact-form-style-one .title { font-size: 36px; }

img.loader { margin-left: 10px; }

/* ============================================================== 
    # Footer Style
=================================================================== */
footer { overflow: hidden; }

.footer-item { margin-top: 50px; }

footer .f-items { padding-top: 70px; }

.f-item.about { position: relative; z-index: 1; padding-right: 50px; }

.f-item.about::after { position: absolute; right: 0; top: -50%; content: ""; height: 200%; width: 500%; background: var(--bg-gray); z-index: -1; }

footer .logo { height: 60px; margin-bottom: 30px; }

footer .widget-title { font-weight: 600; margin-bottom: 30px; }

footer .f-item.link li { margin-top: 10px; font-size: 15px; }

footer .f-item.link li a { display: inline-block; color: #d2d2d4; font-weight: 400; }

footer .f-item.link li a:hover { color: var(--white); }

footer .about p { color: var(--color-paragraph); }

footer { position: relative; z-index: 1; }

.f-item.about::before { position: absolute; right: 0; top: -120px; content: ""; height: 1px; width: 500%; background: #e7e7e7; z-index: 1; }

.newsletter form { position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: space-between; }

.newsletter form input { width: 100%; position: relative; border: none; padding: 0 20px; border-radius: 5px; box-shadow: 0 3px 10px 0 rgb(0 0 0 / 10%); margin-right: 15px; min-height: 55px; }

.newsletter button { background: var(--color-primary); border: none; color: var(--white); border-radius: 5px; height: 53px; padding: 0 30px; font-weight: 600; font-size: 15px; min-width: 130px; }

.secondary .newsletter button { background: var(--color-optional); }

.newsletter button:hover { background: var(--dark); }

.copyright-text p { margin: 0; font-size: 14px; }

.copyright-text p a { color: var(--color-primary); }

.secondary .copyright-text p a { color: var(--color-optional); }

.footer-social li { display: inline-block; margin-right: 10px; }

.footer-social li a { display: inline-block; height: 40px; width: 40px; line-height: 42px; background: var(--dark); text-align: center; border-radius: 50%; }

.footer-item.contact li { display: flex; margin-top: 30px; }

.footer-item.contact li strong { display: block; text-transform: uppercase; color: var(--white); font-size: 14px; }

.footer-item.contact li i { display: inline-block; height: 45px; width: 45px; text-align: center; line-height: 45px; border-radius: 50%; margin-right: 20px; background: rgba(255, 255, 255, 0.1); color: var(--white); font-weight: 300; font-size: 18px; }

.footer-item.contact li { color: #dedede; }

.footer-item.contact li p { margin: 0; color: #dedede; }

.footer-item.contact li a { color: #dedede; font-weight: 500; }

.footer-item.contact li a:hover { color: var(--color-secondary); }

.secondary .footer-item.contact li a:hover { color: var(--color-optional); }

.foter-shape-right-bottom { position: absolute; right: 2%; bottom: 120px; z-index: -1; max-width: 10%; opacity: 0.1; }

.footer-bottom { position: relative; z-index: 1; padding: 25px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); display: none; }

.footer-bottom p { margin: 0; }

@media (max-width: 1023px) {
    .footer-bottom { display: block; }
}

/* ============================================================== 
    # 404 page
=================================================================== */
.error-page-area .shape-left { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 20%; background-position: left !important; background-repeat: no-repeat !important; z-index: -1; opacity: 0.3; background-size: contain !important; }

.error-page-area .shape-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 20%; background-position: right !important; background-repeat: no-repeat !important; z-index: -1; opacity: 0.3; background-size: contain !important; }

.error-box h1 { font-size: 150px; line-height: 110px; font-weight: 700; margin-bottom: 40px; text-shadow: 3px 3px #ff8a43; }

.error-box h2 { font-weight: 600; margin-bottom: 20px; }

.error-box p { padding: 0 10%; }


/* ============================================================== 
     # Dark CSS
=================================================================== */
.dark-layout .bg-dark { background: rgba(0, 0, 0, 0.3) !important; }

.dark-layout .banner-style-one .thumb { margin-bottom: 0; }

.dark-layout .banner-style-one .information { margin-top: 50px; }

.dark-layout .feature-style-one { background: rgba(255, 255, 255, 0.07); }

.dark-layout .feature-style-one i { color: var(--white); }

.dark-layout .feature-style-one.active::after { display: none; }

.dark-layout .feature-style-one.active { border: none; background: var(--bg-gradient); }

.dark-layout .list-check li { color: var(--white); opacity: 0.9; }

.dark-layout .feature-shape { left: -25%; max-width: 30%; }

.dark-layout .soft-details-item .soft-details-info { background: #00274b; border: 1px solid rgba(255, 255, 255, 0.2); }

.dark-layout .list-circle li { color: var(--white); opacity: 0.8; }

.dark-layout .circle-process li .circle strong { color: var(--white); }

.dark-layout .circle-process li { border-color: rgba(255, 255, 255, 0.3); }

.dark-layout .bg-gray { background: rgba(0, 0, 0, 0.3); }

.dark-layout .services-style-one { background: rgba(255, 255, 255, 0.05); }

.dark-layout .services-style-one .icon i::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 40%, #FBFBFD00 70%); }

.dark-layout .icon-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); }

.dark-layout .services-style-one.active::after { display: none; }

.dark-layout nav.navbar.validnavs.navbar-fixed { background: #002f4f !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }

.dark-layout nav.navbar.validnavs.navbar-fixed.no-background { background: transparent !important; border-bottom: none; }

.dark-layout .fun-fact .counter { color: var(--white); }

.dark-layout .pricing-style-one .item { background: transparent; }

.dark-layout .pricing-style-one { background: rgba(0, 0, 0, 0.3); border: none; border-right: 1px solid rgba(255, 255, 255, 0.2); }

.dark-layout .pricing-style-one.active { background: #00274b; }

.dark-layout .btn.btn-border::after { background: var(--color-primary); }

.dark-layout .btn.btn-border:hover { border-color: var(--color-primary); }

.dark-layout .pricing-style-one .pricing-content h2 strong { color: var(--color-primary); }

.dark-layout .testimonial-button-prev, .dark-layout .testimonial-button-next { color: var(--color-heading); }

.dark-layout .testimonial-style-one { background: #00274b; }

.dark-layout .testimonial-style-one::after { background: #00274b; opacity: 0.4; }

.dark-layout .faq-style-one { background: #00274b; border-color: rgba(255, 255, 255, 0.4); }

.dark-layout .faq-style-one button.accordion-button { color: var(--white); border-color: var(--white) !important; }

.dark-layout .faq-tab-navs .nav-link.active { background: var(--color-primary); }

.dark-layout .faq-tab-navs .nav-link { margin: 0 2px; }

.dark-layout .blog-area .meta li, .dark-layout .blog-area .meta li a { color: var(--white); opacity: 0.8; }

.dark-layout .blog-area .meta li::after { background: var(--white); }

.dark-layout .f-item.about::after { background: #00274b; }

.dark-layout .f-item.about::before { background: rgba(255, 255, 255, 0.3); }

.dark-layout footer .about p { color: var(--white); opacity: 0.9; }

.dark-layout .footer-social li a { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); line-height: 40px; }

.dark-layout .banner-app-features li h4 { color: var(--white); }

.dark-layout .banner-app-features li span { color: var(--white); opacity: 0.9; }

.dark-layout .process-style-one { background: #003361; }

.dark-layout .feature-style-two { background: rgba(255, 255, 255, 0.1); border-color: transparent; }

.dark-layout .choose-us-thumb::after { background: rgba(0, 0, 0, 0.3); }

.dark-layout .choose-us-thumb img:nth-child(6) { filter: brightness(0) invert(1); }

.dark-layout .choose-us-thumb img:nth-child(2) { border: none; }

.dark-layout .trial-form { background: #003361; }

.dark-layout .trial-form input,
.dark-layout .trial-form textarea { background: transparent; border-color: rgba(255, 255, 255, 0.2); color: var(--white); }

.dark-layout .trial-form input::-webkit-input-placeholder,
.dark-layout .trial-form textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--white); }

.dark-layout .trial-form input::-moz-placeholder,
.dark-layout .trial-form textarea::-moz-placeholder { /* Firefox 19+ */ color: var(--white); }

.dark-layout .trial-form input:-ms-input-placeholder,
.dark-layout .trial-form textarea:-ms-input-placeholder { /* IE 10+ */ color: var(--white); }

.dark-layout .trial-form input:-moz-placeholder,
.dark-layout .trial-form textarea:-moz-placeholder { /* Firefox 18- */ color: var(--white); }

.dark-layout .top-shape-gray::after { background: rgba(0, 0, 0, 0.3); }

.dark-layout .pricing-style-two .item { background: transparent; }

.dark-layout .pricing-style-two-items { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1); }

.dark-layout .pricing-style-two .pricing-header { background: transparent; }

.dark-layout .pricing-style-two.active { background: var(--bg-gradient-reverse); border-radius: 10px; }

.dark-layout .faq-style-two button.accordion-button { color: var(--white); border-color: var(--white) !important; }

.dark-layout .soft-info-area { background-size: 51%; background-repeat: no-repeat; background-position: right bottom; }

.dark-layout .go-premium { background: #00274b; }

.dark-layout .navbar .attr-right .attr-nav li a:nth-child(2) { color: var(--white); border-color: var(--white); }

.dark-layout .navbar .attr-right .attr-nav li.button a::after { background: var(--white); }

.dark-layout .navbar .attr-right .attr-nav li.button a:hover { color: var(--color-heading); }

.dark-layout .tools-list .icon { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); }

.dark-layout .services-style-two .item { background: rgba(255, 255, 255, 0.06); }

.dark-layout .services-style-two .item .bottom img { filter: brightness(0) invert(1); }

.dark-layout .team-style-one .team-social .share-link ul li a { color: var(--color-heading); }

.dark-layout .app-type-style-one { background: rgba(255, 255, 255, 0.06); }

.dark-layout .app-type-style-one.active { background: var(--bg-gradient); }

.dark-layout .testimonial-style-two .item { background: rgba(255, 255, 255, 0.06); }

.dark-layout .testimonial-style-two .item::after { background: rgba(255, 255, 255, 0.2); opacity: 1; height: 22px; }

.dark-layout .testimonial-style-two .item .thumb { border-color: #01132d; background: transparent; }

.dark-layout .pricing-style-two .btn.btn-border::after { background: var(--color-optional); }

.dark-layout .pricing-style-two .btn.btn-border:hover { border-color: var(--color-optional); }

.dark-layout nav.navbar.validnavs .navbar-toggle i { color: var(--white); }

.navbar-nav li a:hover { color: var(--color-primary) !important; }

@media (max-width: 1023px) {
    .dark-layout nav.navbar.validnavs.navbar-fixed.no-background { background: #00274b !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
}

@media only screen and (max-width: 767px) {
    .dark-layout .banner-style-one .information { margin-top: 0; }

    .dark-layout .banner-style-one .content { padding-bottom: 110px; }

    .dark-layout .feature-style-one { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2); }

    .dark-layout .pricing-style-one { background: transparent; }

    .dark-layout .pricing-style-one .item { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); }

    .dark-layout .pricing-style-one .pricing-header { background: rgba(0, 0, 0, 0.3); }

    .dark-layout .pricing-style-one.active .pricing-header { background: var(--bg-gradient); }

    .dark-layout .faq-tab-navs .nav-link { margin: 0; margin-top: 10px; }

    .dark-layout .pricing-style-two-items { background: transparent; }

    .dark-layout .pricing-style-two .item { border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.2); }

    .dark-layout .pricing-style-two.active { background: transparent; }

    .dark-layout .pricing-style-two.active .item { border: none; background: var(--bg-gradient-reverse); }

    .dark-layout .pricing-style-two .pricing-header { background: rgba(255, 255, 255, 0.1); }

    .dark-layout .top-shape-gray::after { height: 440px; }

    .dark-layout .free-trial-area { background-color: rgba(255, 255, 255, 0.06); }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .dark-layout .banner-style-one .information { margin-top: 0; }

    .dark-layout .banner-style-one .content { padding-top: 110px; padding-bottom: 250px; }

    .dark-layout .feature-style-one { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2); }

    .dark-layout .pricing-style-one { background: transparent; border: none; }

    .dark-layout .pricing-style-one .item { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); }

    .dark-layout .pricing-style-one .pricing-header { background: rgba(0, 0, 0, 0.3); }

    .dark-layout .pricing-style-one.active .pricing-header { background: var(--bg-gradient); }

    .dark-layout .faq-tab-navs .nav-link { margin: 0; margin-top: 10px; }

    .dark-layout .pricing-style-one.active { background: transparent; }

    .dark-layout .free-trial-area { background-color: rgba(255, 255, 255, 0.06); }

    .dark-layout .pricing-style-two-items { background: transparent; }

    .dark-layout .pricing-style-two .item { border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.2); }

    .dark-layout .pricing-style-two.active { background: transparent; }

    .dark-layout .pricing-style-two.active .item { border: none; background: var(--bg-gradient-reverse); }

    .dark-layout .pricing-style-two .pricing-header { background: rgba(255, 255, 255, 0.1); }

    .dark-layout .top-shape-gray::after { height: 482px; }
}

/* ============================================================== 
    # Responsive CSS
=================================================================== */

/* Tablet Layout: 768px.*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    /* Banner */

    .banner-style-one .content { padding-top: 120px; }

    .banner-style-one .thumb { padding: 0 50px; margin: 0; margin-top: 50px; margin-bottom: 120px; }

    .banner-style-one .thumb .thumb-right { right: 0; }

    .banner-style-one .thumb .shape { right: 0; top: -50px; }

    .banner-style-one .information { margin-top: 0; }

    .banner-style-one .thumb { padding: 0 50px; margin: 0; margin-top: 50px; margin-bottom: 120px; }

    .banner-style-one .thumb .thumb-right { right: 0; }

    .banner-style-one .thumb .shape { right: 0; top: -50px; }

    .banner-style-one { text-align: center; }

    .banner-style-one p { padding: 0; }

    /* Banner Two */
    .banner-style-two-area { background-size: cover; background-image: none !important; }

    .banner-style-two .content { padding-top: 120px; }

    .banner-style-two .thumb { padding-right: 0; margin-top: 30px; }

    .banner-style-two-area::after { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; width: 100%; background: var(--bg-gradient-reverse); z-index: -1; }

    .banner-app-features { position: inherit; width: 100%; transform: inherit; }

    .banner-app-features ul { display: grid; grid-template-columns: 1fr 1fr 1fr; }

    .banner-app-features li { display: block; margin-top: 55px !important; }

    .banner-app-features li i { margin: 0; margin-bottom: 15px; }

    .banner-style-two p { padding-right: 15%; }

    .banner-app-features li span { color: var(--white); margin-bottom: 5px; }

    .banner-app-features li h4 { color: var(--white); }

    .banner-shape-right-top { z-index: inherit; }

    /* Banner Three */
    .banner-style-three .information { margin: 0; }

    .banner-style-three .content { padding-top: 120px; }

    .banner-style-three .thumb .inner { text-align: right; right: 0; top: -70px; }

    .banner-style-three .thumb .inner img { max-width: 60%; }

    .banner-style-three .thumb .thumb-right { left: 0; }

    .banner-style-three .thumb .thumb-right img { max-width: 50%; }

    .banner-style-three .thumb .thumb-right { bottom: -90px; display: none; }

    .banner-style-three .thumb { margin: 0; margin-top: 100px; }

    /* About */
    .about-thumb { padding: 0; }

    .about-thumb .user-fun-fact { position: inherit; margin-top: 30px; }

    /* Feature */
    .feature-style-one-box .item-grid { display: flex; grid-column-gap: 30px; }

    .feature-style-one { margin: 0; text-align: center; }

    .feature-shape { display: none; }

    .feature-style-one { width: 50%; }

    .feature-style-one.active { width: 48%; }

    .feature-style-one.active p { padding: 0 10%; }

    /* Brand */
    .brand-style-one-items { padding: 120px 30px; }

    .brand-style-one h2 { font-size: 22px; }

    .brand-style-one h2 strong { font-size: 42px; }


    /* Soft Premium Info */
    .soft-info-thumb { padding: 0; margin-top: 50px; padding-left: 20%; }

    .soft-info-thumb > img { max-width: 100%; margin-top: 60px; }

    /* Team Details */
    .team-right-info { margin: 0; top: 0; }


    /* Software Details */

    .soft-details-item { margin-top: 50px; margin-right: 0; }

    /* Active Current User */
    .user-fun-fact { text-align: center; }

    .user-fun-fact .fun-fact .counter { justify-content: center; }

    .current-user-area .list-circle { display: inline-block; }

    .current-user-area .list-circle li::after { display: none; }

    .current-user-area .list-circle li { padding: 0; }

    .active-user-info { margin-top: 30px; }

    /* Pricing */
    .pricing-style-one-items { margin: 0; box-shadow: inherit; margin-top: -30px; }

    .pricing-style-one { padding: 0 15px; border: none; background: transparent; overflow: inherit; }

    .pricing-style-one { margin-top: 30px; }

    .pricing-style-one .item { border-radius: 10px; overflow: hidden; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); }

    .pricing-style-one.active { transform: inherit; border: none; }

    /* Pricing Style Two */
    .pricing-style-two:first-child .item { padding: 0; }

    .pricing-style-two-items { border: none; border-radius: inherit; overflow: inherit; background: transparent; margin-top: -30px; }

    .pricing-style-two { padding: 0 10px; margin-top: 30px; }

    .pricing-style-two .item { overflow: hidden; border-radius: 7px; border: 1px solid #e7e7e7; }



    /* Testimonials */

    .testimonials-area { text-align: center; }

    .testimonial-style-one .privider { display: block; }

    .testimonial-style-one .thumb { display: inline-flex; }

    .testimonial-style-one .thumb img { margin: 0; margin-bottom: 30px; }

    .testimonial-style-one .thumb::after { left: 50%; transform: translateX(-50%); }

    .testimonial-nav { top: auto; bottom: 0; right: auto; width: auto; display: inline-block; padding: 0; left: 50%; transform: translateX(-50%); }

    .testimonial-nav > div { display: inline-block; }

    .testimonail-item-one-items::after { display: none; }

    .testimonail-item-one-items { padding-bottom: 100px; }

    .testimonial-style-one p { font-size: 17px; }

    .testimonial-style-one h4 { font-size: 20px; }

    .testimonial-style-one { padding: 60px 37px; }

    .testimonials-area .heading-left .content-left .title { padding: 0 15%; }

    .carousel-stage-right { padding-right: 15px; }


    /* Choose Us */
    .choose-us-thumb img:nth-child(4) { left: -5%; display: none; }

    .choose-us-thumb img:nth-child(6) { left: -30px; top: 100px; display: none; }

    .choose-us-thumb img:nth-child(7) { right: auto; left: 0; }

    .choose-us-style-one .title { line-height: 1.2; margin-top: 70px; }

    /* Free Trial */
    .free-trial-area { background-color: var(--bg-gray); padding-top: 120px; }

    .free-trial-style-one .call { border-top: 1px solid #d5c5c5; }

    /* Fun Fact */
    .faq-style-two .fun-fact.secondary { display: none; }

    .faq-style-two-area { background-image: none !important; }


    /* Process */
    .process-fun-fact { top: 0; text-align: center; margin: 0; justify-content: center; }

    .process-fun-fact .fun-fact { margin-top: 50px; padding: 0 50px; border-right: 1px solid #dddddd; }

    .process-fun-fact .fun-fact:last-child { border: none; }

    .process-fun-fact .fun-fact .counter { justify-content: center; }

    .process-fun-fact::after { display: none; }

    /* Feature Style Two */
    .feature-style-two-area .col-lg-6 { padding: 0 15px; }

    .feature-style-two { margin-bottom: 30px; display: block; padding: 50px 37px; }

    .feature-style-two .btn-arrow { position: absolute; right: 0; display: none; }

    .feature-style-two .icon img { margin-bottom: 30px; }

    .list-circle li { font-size: 15px; }


    /* Feature Style Three */

    .feature-three-thumb { margin-top: 70px; padding-left: 50px; padding-top: 40px; }

    .feature-three-thumb img:nth-child(2) { max-width: 44%; }

    .feature-three-thumb .icon { right: 20%; top: 0; }

    .feature-tab-navs .nav-link { text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); }

    .tools-list li:nth-child(8) .icon { height: 100px; width: 100px; }

    .tools-list li:nth-child(10) .icon { height: 100px; width: 100px; top: 40px; }

    .tools-list li:nth-child(6) .icon { height: 100px; width: 100px; }

    .tools-list li:nth-child(4) .icon { height: 100px; width: 100px; }

    .tools-list li:nth-child(5) .icon { height: 150px; width: 150px; top: 60px; }

    .tools-list li:nth-child(9) .icon { height: 150px; width: 150px; }

    .tools-list li:nth-child(6) .icon { top: 0; }

    .tools-list li:first-child .icon { height: 150px; width: 150px; }

    .tools-list li:nth-child(3) .icon { top: 50px; }

    .tools-list li:nth-child(7) .icon { height: 150px; width: 150px; top: 55px; }

    /* Team */
    .team-box::after { right: -25%; height: 35%; }

    .team-style-one .item .info { text-align: center; }


    /* Portfolio */
    .gallery-items.colums-3 .gallery-item { width: 50%; }

    .gallery-project-basic-info { top: 0; margin: 0; margin-bottom: 30px; }


    /* Contact */

    .contact-style-one-info { padding: 0; margin-bottom: 50px; }


    /* Footer */

    .f-item.about::after { display: none; }

    footer .logo { filter: brightness(0) invert(1); }

    .newsletter form { display: block; margin-top: 30px; }

    .newsletter button { width: 100%; margin-top: 13px; }

    footer .about p { color: #d2d2d4; }

    .f-item .copyright-text { display: none; }

    .footer-social { display: none; }

    .f-item.about::before { display: none; }
}

/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {

    /* Defautl */
    .title { font-size: 36px; line-height: 1.2; }

    /* Banner */
    .banner-style-one h2 { font-size: 36px; }

    .banner-style-one .thumb { padding: 0; margin: 0; margin-top: 50px; }

    .banner-style-one .thumb .inner { display: none; }

    .banner-style-one .thumb .thumb-right { display: none; }

    .banner-style-one .content { padding-bottom: 150px; padding-top: 60px; }

    .banner-style-one .thumb .shape { display: none; }

    .banner-style-one .information { margin-top: 0; }

    /* Banner Two */
    .banner-style-two-area { background-size: cover; background-image: none !important; }

    .banner-style-two .content { padding-top: 70px; padding-bottom: 70px; }

    .banner-style-two .thumb { padding-right: 0; margin-top: 30px; }

    .banner-style-two-area::after { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; width: 100%; background: var(--bg-gradient-reverse); z-index: -1; }

    .banner-app-features { position: inherit; width: 100%; transform: inherit; }

    .banner-app-features ul { display: grid; grid-template-columns: 1fr; text-align: center; display: none; }

    .banner-app-features li { display: block; margin-top: 55px !important; }

    .banner-app-features li i { margin: 0; margin-bottom: 15px; }

    .banner-app-features li span { color: var(--white); margin-bottom: 5px; }

    .banner-app-features li h4 { color: var(--white); }

    .banner-shape-right-top { z-index: inherit; }

    .banner-style-two h2 { font-size: 36px; }

    /* Banner Three */
    .banner-style-three .information { margin: 0; }

    .banner-style-three .content { padding-top: 60px; padding-bottom: 70px; }

    .banner-style-three .thumb .inner { text-align: right; right: 0; top: -70px; display: none; }

    .banner-style-three .thumb .thumb-right { bottom: -90px; display: none; }

    .banner-style-three .thumb { margin: 0; margin-top: 50px; }

    .banner-style-three h2 { font-size: 36px; }

    .banner-style-three { text-align: center; }

    /* About */
    .about-thumb { padding: 0; }

    .about-thumb .user-fun-fact { position: inherit; margin-top: 30px; }

    /* Feature */
    .feature-style-one-box { text-align: center; }

    .feature-shape { display: none; }

    /* Brand */
    .brand-style-one h2 { display: block; font-size: 20px; }

    .brand-style-one-items { padding: 50px; }

    .brand-style-one h2 strong { font-size: 36px; }

    .brand-style-one .swiper img { height: auto; padding: 0 5%; }

    /* Software Details */
    .soft-details-item { padding: 0; margin: 0; margin-top: 50px; }

    .soft-details-item .soft-details-info { position: relative; bottom: 0; margin: 0; left: 0; }

    .shape-left-bottom { display: none; }

    .swiper-slide .soft-details-item .soft-details-info { opacity: 1; visibility: visible; margin-top: 30px; bottom: 0; }

    .swiper-slide.swiper-slide-active .soft-details-item .soft-details-info { bottom: 0; opacity: 1; visibility: visible; }

    .soft-details-carousel .swiper-wrapper { padding: 0; }

    .swiper-slide .soft-details-item .soft-details-info::after { position: absolute; left: 50%; top: -15px; content: ""; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #e7e7e7; margin-left: -15px; }


    /* Choose us */
    .choose-us-thumb img:nth-child(2) { display: none; }

    .choose-us-thumb img:nth-child(8) { display: none; }

    .choose-us-thumb img:nth-child(6) { display: none; }

    .choose-us-thumb img:nth-child(4) { display: none; }

    .choose-us-thumb::after { display: none; }

    .choose-us-thumb { padding-bottom: 50px; }

    .choose-us-thumb img:nth-child(7) { max-width: 100px; right: auto; left: 0; bottom: -30px; }

    .choose-us-thumb img:nth-child(5) { right: 15px; }

    .choose-us-style-one .title { margin-top: 60px; }

    /* Free Trial */
    .free-trial-area { background-color: var(--bg-gray); padding-top: 50px; }

    .free-trial-style-one .call { border-top: 1px solid #d5c5c5; }

    /* Service */
    .software-style-one-area { background-image: none !important; background-color: var(--bg-gray); }

    .services-style-two-area .site-heading { text-align: center; }

    .services-style-two .item { text-align: center; }

    .services-style-two .item .bottom { display: block; margin-top: 15px; }

    .services-style-two .item .bottom span { display: block; }

    .services-style-two .item .bottom .angle-btn { display: none; }

    .services-details-area .faq-style-one { padding: 50px; }


    /* Feature Style Two */

    .feature-style-two { margin-bottom: 30px; display: block; padding: 50px 37px; }

    .feature-style-two .btn-arrow { position: absolute; right: 0; display: none; }

    .feature-style-two .icon img { margin-bottom: 30px; }

    .list-circle li { font-size: 15px; }

    .feature-style-two-area .row { margin: 0; }

    .feature-style-two-area .col-lg-6 { padding: 0; }

    /* Fun Fact */
    .faq-style-two .fun-fact.secondary { display: none; }


    /* Soft Premium Info */
    .soft-info-thumb { padding: 0; margin-top: 30px; }

    .go-premium { max-width: 100%; position: inherit; margin-top: 30px; }

    .soft-info-thumb img { max-width: 100%; }


    /* Pricing */
    .pricing-style-one-items { margin: 0; box-shadow: inherit; }

    .pricing-style-one { padding: 0 15px; border: none; background: transparent; overflow: inherit; }

    .pricing-style-one:first-child { margin-top: 0; }

    .pricing-style-one { margin-top: 30px; }

    .pricing-style-one .item { border-radius: 10px; overflow: hidden; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); }

    .pricing-style-one.active { transform: inherit; border: none; }

    /* Pricing Style Two */
    .pricing-style-two:first-child .item { padding: 0; }

    .pricing-style-two-items { border: none; border-radius: inherit; overflow: inherit; background: transparent; margin: 0; }

    .pricing-style-two { padding: 0 10px; margin-top: 30px; }

    .pricing-style-two .item { overflow: hidden; border-radius: 7px; border: 1px solid #e7e7e7; }

    .pricing-style-two:first-child { margin-top: 0; }


    /* Feature Style Three */
    .tools-integrations-area.default-padding.text-center { overflow: hidden; }

    .feature-three-thumb::after { display: none; }

    .feature-three-thumb { margin-top: 50px; padding-left: 50px; padding-top: 40px; }

    .feature-three-thumb img:nth-child(2) { max-width: 44%; }

    .feature-three-thumb .icon { right: 20%; top: 0; }

    .feature-tab-navs .nav-link { text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); }

    /* Team */
    .team-box::after { right: -25%; height: 20%; }

    .team-style-one .item .info { text-align: center; }

    .team-box.default-padding.bottom-less { padding-bottom: 10px; }

    .team-style-one-area.default-padding { padding-bottom: 10px; }

    /* Team Single */

    .team-right-info { margin: 0; position: inherit; padding: 50px 37px; }

    .qualification-grid { display: block; }

    .qualification-item { width: 100%; text-align: center; margin-top: 30px; }

    .qualification-item:first-child { margin-top: 0; }

    .team-right-info .social { display: block; }

    .team-right-info .social .share-link { margin: 0; padding: 0; margin-top: 20px; display: none; }



    /* Testimonials */

    .testimonials-area { text-align: center; }

    .testimonial-style-one .privider { display: block; }

    .testimonial-style-one .thumb { display: inline-flex; }

    .testimonial-style-one .thumb img { margin: 0; margin-bottom: 30px; }

    .testimonial-style-one .thumb::after { left: 50%; transform: translateX(-50%); }

    .testimonial-nav { top: auto; bottom: 0; right: auto; width: auto; display: inline-block; padding: 0; left: 50%; transform: translateX(-50%); }

    .testimonial-nav > div { display: inline-block; }

    .testimonail-item-one-items::after { display: none; }

    .testimonail-item-one-items { padding-bottom: 100px; }

    .carousel-stage-right { padding-right: 15px; }

    .testimonial-style-one p { font-size: 18px; }

    .testimonial-style-one { padding: 50px 37px; }

    .testimonial-style-one h4 { font-size: 20px; }




    /* Active Current User */
    .user-fun-fact { text-align: center; }

    .user-fun-fact .fun-fact .counter { justify-content: center; }

    .current-user-area .list-circle { display: inline-block; }

    .current-user-area .list-circle li::after { display: none; }

    .current-user-area .list-circle li { padding: 0; }

    .active-user-banner { grid-column-gap: 30px; grid-row-gap: 30px; }

    .active-user-banner .item img { margin-top: 30px; }

    .active-user-info { margin-top: 30px; }

    .faq-style-two-area { background-image: none !important; }


    /* Accordion */
    .shape-arro { max-width: 100px; left: 0; top: -75px; }

    .faq-style-one { padding: 50px 30px; }

    .faq-tab-navs { display: block; }

    .faq-tab-navs .nav-link { width: 100%; border-radius: 10px; margin-top: 15px; }

    .faq-tab-navs .nav-link:first-child { margin-top: 0; }


    /* Tools List */
    .tools-list { text-align: center; display: inline-block; margin-top: 15px; margin-bottom: -40px; }

    .tools-list .icon { top: 0 !important; }

    .tools-list li:nth-child(2n) .icon { height: 100px; width: 100px; line-height: inherit; }

    .tools-list li:nth-child(2n) .icon img { height: 45px; }

    .tools-list li { padding: 15px; }


    /* Process */
    .process-style-one { margin-top: 30px; }

    .process-style-one-box { margin-top: -30px; }

    .shape-center { display: none; }

    .process-fun-fact { top: 0; display: block; text-align: center; margin: 0; }

    .process-fun-fact .fun-fact { margin-top: 30px; }

    .process-fun-fact .fun-fact .counter { justify-content: center; }

    .process-fun-fact::after { display: none; }

    .faq-style-area { background-image: none !important; }

    /* Contact */

    .contact-style-one-info { padding: 0; margin-bottom: 50px; }

    /* Portfolio */
    .gallery-items.colums-3 .gallery-item { width: 100%; }

    .gallery-project-basic-info { top: 0; margin: 0; margin-bottom: 30px; }

    .project-details .check-list { display: block; }

    .project-details .row .col-lg-6 { margin-top: 30px; }

    .project-details .row .col-lg-6:first-child { margin-top: 0; }


    /* Footer */

    footer .f-items { padding-top: 0; }

    .f-item.about::after { display: none; }

    footer .logo { filter: brightness(0) invert(1); }

    .newsletter form { display: block; margin-top: 30px; }

    .newsletter button { width: 100%; margin-top: 13px; }

    footer .about p { color: #d2d2d4; }

    .f-item .copyright-text { display: none; }

    .footer-social { display: none; }

    .f-item.about { padding-right: 0; }

    .f-item.about::before { display: none; }
}

/* Max Wide Mobile Layout: 600px. */
@media only screen and (min-width: 600px) and (max-width: 767px) {

    /* Portfolio */
    .gallery-items.colums-2 .pf-item,
    .gallery-items.colums-3 .pf-item { width: 50%; }
}

/* Max Wide Mobile Layout: 600px. */
@media only screen and (min-width: 600px) and (max-width: 1200px) {

    /* Portfolio */
    .gallery-items.colums-4 .pf-item { width: 50%; }
}

/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .side { padding: 50px; width: 400px; }

    .attr-nav { display: inline-block; }
}

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

    /* global reset - start */
    .order-last { order: 0; }
}

/* Custom Layout */
@media only screen and (max-width: 480px) {
    /* Brand */
    .soft-details-style-one { text-align: center; }

    .circle-process li { display: block; border: none; margin: 0; padding: 0; margin-top: 40px; }

    .services-details-area .faq-style-one { padding: 50px 37px; }

    /* Free Trial */
    .trial-form { padding: 50px 30px; }

    .contact-form-style-one { padding: 50px 37px; }
}

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

    /* Team Single */
    .team-single-area .skill-items { padding-left: 0; margin-top: 30px; }

    /* Software Details */
    .soft-details-item { margin-top: 50px; margin-right: 0; }

    .soft-details-style-one { text-align: center; }

    .process-style-onea-rea { padding-top: 120px; }

    .feature-three-thumb::after { height: 550px; width: 550px; }


    /* Banner Two */
    .banner-style-two-area { background-size: cover; background-image: none !important; }

    .banner-style-two .content { padding-top: 220px; }

    .banner-style-two .thumb { padding-right: 0; margin-top: 30px; }

    .banner-style-two-area::after { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; width: 100%; background: var(--bg-gradient-reverse); z-index: -1; }

    .banner-app-features { position: inherit; width: 100%; transform: inherit; }

    .banner-app-features ul { display: grid; grid-template-columns: 1fr 1fr 1fr; }

    .banner-app-features li { display: block; margin-top: 55px !important; }

    .banner-app-features li i { margin: 0; margin-bottom: 15px; }

    .banner-style-two p { padding-right: 15%; }

    .banner-app-features li span { color: var(--white); margin-bottom: 5px; }

    .banner-app-features li h4 { color: var(--white); }

    .banner-shape-right-top { z-index: inherit; }

    /* Portfolio */
    .gallery-style-one .thumb::after { height: 267px; width: 127%; transform: skewY(40deg); }

    .gallery-style-one:hover .thumb::after { top: 100%; opacity: 0.6; background: var(--dark); }

    .gallery-style-one .thumb::before { transform: skewY(40deg); }

    .gallery-style-one:hover .thumb::before { height: 200%; bottom: 32px; }
}


/* ============================================================== 
     # Home Ai Writer 
=================================================================== */


.sub-heading.theme { color: var(--color-primary); font-weight: 800; background: var(--bg-gradient-reverse); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Banner */
.banner-style-four-area { padding-top: 200px; padding-bottom: 120px; }

.banner-style-four .illustration { margin-top: 50px; position: relative; z-index: 1; }

.banner-style-four .illustration img:nth-child(2) { position: absolute; left: -74px; top: 0; width: 200px; }

.banner-style-four-area { position: relative; z-index: 1; background-size: contain; background-repeat: no-repeat; background-position: center top; }

.banner-style-four .title { font-size: 60px; }

.banner-style-four .title b { font-weight: 600; }

.service-review { display: flex; align-items: center; justify-content: center; margin-top: 40px; }

.service-review .rating-provider img { height: 50px; width: 50px; border-radius: 50%; position: relative; border: 2px solid; }

.service-review .rating-provider img:nth-child(2) { left: -20px; }

.service-review .rating-provider img:nth-child(3) { left: -40px; }

.service-review .rating-provider img:nth-child(4) { left: -60px; }

.service-review .rating-provider { margin-right: -40px; }

.service-review .rating-provider h4 { margin: 0; }

.service-review h4 { margin: 0; font-weight: 600; }

.banner-style-four .content p { font-size: 18px; line-height: 1.7; padding: 0 19%; opacity: 0.9; }

.banner-style-four-shape { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-top: -15%; max-width: 30%; z-index: -1; }

.cd-words-wrapper { display: inline-block; position: relative; text-align: left; }

.cd-words-wrapper b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: -6px; }

.cd-words-wrapper b.is-visible { position: relative; }

.no-js .cd-words-wrapper b { opacity: 0; }

.no-js .cd-words-wrapper b.is-visible { opacity: 1; }



/* -------------------------------- 

xclip 

-------------------------------- */

.cd-headline.clip span { display: inline-block; padding: 0; }

.cd-headline.clip .cd-words-wrapper { overflow: hidden; vertical-align: middle; }

.cd-headline.clip .cd-words-wrapper::after { content: ''; position: absolute; top: 50%; right: 0; width: 2px; height: 80%; background-color: var(--white); transform: translateY(-50%); opacity: 0.6; }

.cd-headline.clip b { opacity: 0; }

.cd-headline.clip b.is-visible { opacity: 1; }


/* Process Style Two */

.process-style-two-area { position: relative; z-index: 1; }

.process-style-two-area::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 90%; background: rgba(0, 0, 0, 0) linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 130%) repeat scroll 0 0; z-index: -1; }

.process-style-two-items { position: relative; z-index: 1; padding-top: 60px; }

.process-style-two-items::after { position: absolute; right: 0; top: 0; content: ""; height: 2px; width: 500%; background: var(--color-optional); }

.process-style-two::before { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--color-optional); z-index: -1; opacity: 0.5; border-radius: 10px; }

.process-style-two { position: relative; padding-top: 60px; padding-right: 40px; padding: 60px 37px; z-index: 1; }

.process-style-two h4 { font-weight: 600; font-size: 24px; margin-bottom: 20px; position: relative; }

.process-style-two h4::after { position: absolute; left: -5px; top: -129px; content: ""; height: 20px; width: 20px; background: var(--white); z-index: -1; border-radius: 50%; }

.process-style-two h4::before { position: absolute; left: -15px; top: -139px; content: ""; height: 40px; width: 40px; border: 2px solid var(--white); z-index: -1; border-radius: 50%; }

.process-style-two.active h4::before,
.process-style-two:hover h4::before { animation: spinner 10s infinite linear; border: 2px dashed var(--white); }

.process-style-two::after { position: absolute; left: 30px; top: -15px; content: ""; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 15px solid var(--color-optional); opacity: 0.5; }

.process-style-two li { margin-top: 10px; font-weight: 500; position: relative; z-index: 1; padding-left: 30px; }

.process-style-two li::after { position: absolute; left: 0; top: 0; content: "\f0a4"; font-family: "Font Awesome 5 Pro"; font-size: 20px; text-align: center; border-radius: 5px; font-weight: 100; }

.process-style-two ul { list-style: none; margin: 0; padding: 0; margin-top: 20px; }

.process-style-two p { opacity: 0.9; }



/* ============================================================== 
     # Service Overview 
=================================================================== */

.overview-area { background-size: 23%; background-repeat: no-repeat; background-position: left bottom; }

.service-overview-tab-navs { display: inline-block; border: none; margin-bottom: 20px; position: relative; padding: 0 100px; z-index: 1; }

.service-overview-tab-navs::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--black); opacity: 0.3; border-radius: 50px; }

.service-overview-tab-navs::before { position: absolute; left: -2%; top: -13%; content: ""; height: 126%; width: 104%; background: var(--bg-gradient-reverse); opacity: 0.3; border-radius: 50px; }

.service-overview-tab-navs button.nav-link { margin: 0; border-radius: 5px; background: transparent !important; border: none; color: var(--white) !important; padding: 20px; position: relative; z-index: 1; overflow: inherit; font-size: 20px; font-weight: 600; display: inline-block; }

.service-overview-tab-navs button.nav-link::after { display: none; }

.service-overview-tab-navs button.nav-link::before { position: absolute; left: 0; top: 50%; content: ""; height: 2px; width: 0; background: var(--color-optional); z-index: -1; transition: all 0.35s ease-in-out; }

.service-overview-tab-navs button.nav-link.active::before { width: 100%; }

.service-overview-single i { display: inline-block; font-size: 30px; margin-bottom: 30px; font-weight: 1; position: relative; z-index: 1; color: var(--white); height: 70px; width: 70px; text-align: center; line-height: 70px; background: var(--color-optional); border-radius: 8px; }

.service-overview-single { margin-top: 50px; }

.service-overview-single p { margin: 0; opacity: 0.9; }

/* ============================================================== 
     # Choose Us Style Two 
=================================================================== */
.choose-us-fun-fact { background-size: cover; padding: 120px 60px; position: relative; border-radius: 10px; }

.choose-us-fun-fact .counter { justify-content: center; }

.choose-us-fun-fact .fun-fact { margin-top: 40px; }

.choose-us-fun-fact .fun-fact:first-child { margin-top: 0; }

.choose-us-fun-fact::before { position: absolute; right: 0; top: 5%; content: ""; height: 90%; width: 100%; background: var(--bg-gradient-reverse); transform: skewX(-6deg); z-index: -1; border-radius: 10px; }

.choose-us-fun-fact .fun-fact .user-ratings i { color: #ffd431; }

.choose-us-style-two h2 strong { font-weight: 600; display: inline-block; position: relative; z-index: 1; }

.choose-us-style-two ul li { display: inline-block; position: relative; z-index: 1; padding-left: 33px; margin-right: 30px; font-weight: 500; }

.choose-us-style-two ul li::after { position: absolute; left: 0; top: 5px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-size: 11px; height: 20px; width: 20px; line-height: 20px; text-align: center; background: var(--color-optional); border-radius: 50%; }

.choose-us-style-two ul li:last-child { margin-right: 0; }

.choose-us-style-two ul { margin-top: 25px; }

.choose-us-style-two p { opacity: 0.9; }

.btn.btn-border.secondary::after { background: var(--color-optional); }

.btn.btn-border.secondary:hover { border-color: var(--color-optional); }

.site-heading.secondary strong::after { position: absolute; left: -10%; bottom: -5px; content: ""; height: 120%; width: 120%; background: url(../img/shape/33.png); background-size: contain; background-repeat: no-repeat; background-position: bottom center; z-index: -1; }

/* ============================================================== 
     # Testimonial 
=================================================================== */
.testimonial-style-three-area { position: relative; z-index: 1; }

.testimonial-style-three { padding-bottom: 120px; }

.testimonial-shape img { position: absolute; max-width: 150px; }

.testimonial-shape img:first-child { left: 5%; }

.testimonial-shape img:nth-child(2) { left: 50%; bottom: 120px; max-width: 100px; transform: translateX(-50%); }

.testimonial-shape img:nth-child(3) { right: 5%; top: 50%; transform: translateY(-50%); max-width: 120px; }

.testimonial-style-three p { font-size: 25px; line-height: 1.6; font-style: italic; }

.testimonial-style-three .provider { margin-top: 30px; }

.testimonial-style-three .provider h4 { margin-bottom: 5px; font-size: 28px; font-weight: 600; }

.testimonial-style-three .provider span { text-transform: uppercase; font-size: 15px; font-weight: 500; }

.testimonial-style-three .item { position: relative; z-index: 1; }

.testimonial-style-three .item::after { position: absolute; left: 50%; top: 40px; content: ""; transform: translateX(-50%); height: 400px; width: 400px; background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 0, 0, 0) 50%, var(--color-optional) 200%) repeat scroll 0 0; z-index: -1; border-radius: 50%; }

.testimonial-style-three .item .icon { height: 70px; width: 70px; margin: auto auto 30px; border-radius: 50%; opacity: 0.6; }

.swiper-pagination.testimonial-three-pagination { position: relative; top: -150px; }

.swiper-pagination.testimonial-three-pagination span.swiper-pagination-bullet { height: 25px; width: 25px; background: transparent; border: 2px solid var(--color-optional); position: relative; z-index: 1; opacity: 0.5; margin: 0 7px; }

.swiper-pagination.testimonial-three-pagination span.swiper-pagination-bullet::after { position: absolute; left: 50%; top: 50%; content: ""; height: 8px; width: 8px; background: var(--color-optional); transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; }

.swiper-pagination.testimonial-three-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active::after { opacity: 1; }

.swiper-pagination.testimonial-three-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; }

/* ============================================================== 
     # Pricing 
=================================================================== */

.pricing-style-three-area { background-size: 50% !important; background-repeat: no-repeat !important; background-position: center bottom !important; }

.pricing-style-threee { padding: 50px 40px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; }

.btn.btn-border.btn-sm { padding: 14px 50px; }

.pricing-style-threee .btn { width: 100%; }

.pricing-style-threee.active::after { position: absolute; left: 0; top: 0; content: ""; background: var(--color-optional); height: 100%; width: 100%; border-radius: 10px; z-index: -1; opacity: 0.1; }

.pricing-style-threee { position: relative; z-index: 1; }

.pricing-style-threee ul { margin: 0; padding: 0; list-style: none; display: grid; grid-row-gap: 8px; margin-top: 30px; }

.pricing-style-threee ul li i { font-size: 12px; font-weight: 100; position: relative; top: -1px; min-width: 20px; }

.pricing-style-threee ul li { font-size: 15px; opacity: 0.9; }

.pricing-style-threee h4 { font-weight: 600; display: flex; align-items: center; justify-content: space-between; }

.pricing-style-threee h4 span { display: inline-block; background: var(--bg-gradient-reverse); font-size: 13px; text-transform: uppercase; padding: 5px 15px; line-height: 1; border-radius: 5px; }

.pricing-style-threee .price h2 { font-weight: 600; font-size: 65px; margin: 0; margin-top: 30px; }

.pricing-style-threee .price h2 sub { font-size: 16px; font-weight: 500; left: -10px; }

.pricing-style-threee .price h2 sup { font-size: 36px; top: -30px; font-weight: 400; }

.btn.btn-light.btn-sm { padding: 14px 50px; }

.extra-gutter { --bs-gutter-x: 45px; position: relative; z-index: 1; }

.pricing-shap { position: absolute; max-width: 300px; left: -220px; top: -160px; z-index: -1; }

/* ============================================================== 
     # Faq 
=================================================================== */

a.video-play-button-standard { position: relative; }

.video-play-button-standard i { background: var(--bg-gradient); font-weight: 100; font-size: 35px; position: relative; left: 3px; top: 2px; display: inline-block; height: 100px; width: 100px; line-height: 100px; text-align: center; border-radius: 50%; color: #ffffff; z-index: 9; }

.video-play-button-standard .effect { position: absolute; width: 150px; height: 150px; background: #07071e; opacity: 0; border-radius: 100%; left: 50%; top: 50%; z-index: -1; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; }

.video-play-button-standard::after { position: absolute; content: ""; width: 150px; height: 150px; background: var(--black); opacity: 0; border-radius: 100%; left: 50%; top: 50%; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; -webkit-animation-delay: 2s; animation-delay: 2s; }

.video-play-button-standard::before { position: absolute; content: ""; width: 150px; height: 150px; background: #0002a9; opacity: 0; border-radius: 100%; left: 50%; top: 50%; -webkit-animation: video-play 1500ms ease-out infinite; animation: video-play 1500ms ease-out infinite; -webkit-animation-delay: 3s; animation-delay: 3s; }

.faq-style-three-area .video-play-button-standard { position: absolute; right: 120px; bottom: 120px; }

.faq-style-three-area .video-play-button-standard i { background: var(--bg-gradient-reverse); }

.faq-style-three button.accordion-button { color: var(--white) !important; font-size: 18px; font-weight: 600; padding: 25px 0 !important; background: transparent !important; padding-right: 60px !important; position: relative; box-shadow: inherit; border: none; border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important; border-radius: inherit !important; }

.faq-style-three button.accordion-button::after { background: transparent; content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: 100; font-size: 25px; position: absolute; top: 22px; right: 25px; }

.faq-style-three button.accordion-button::after,
.faq-style-three button.accordion-button:hover::after { transform: inherit !important; }

.faq-style-three button.accordion-button:not(.collapsed)::after { -webkit-transform: inherit; transform: inherit; content: "\f106"; }

.faq-style-three button.accordion-button:focus { background: transparent; color: var(--color-heading); border: none; -webkit-box-shadow: inherit; box-shadow: inherit; padding-left: 0; font-weight: 600; }

.faq-style-three .accordion-item { background: transparent; border: none; }

.faq-style-three .accordion-body { padding-left: 0; padding-top: 25px; }

.faq-style-three-content { margin-top: -15px; }

.faq-style-three .accordion-body p:last-child { margin: 0; }

.faq-style-three .accordion-body p { opacity: 0.9; }

.dark-layout .newsletter button { background: var(--color-optional); }

.dark-layout .copyright-text p a { color: var(--white); }

@media (max-width: 1023px) {
    nav.navbar.validnavs .navbar-nav > li > a { color: var(--color-heading); }

    nav.navbar.validnavs .navbar-collapse.collapse button i { color: var(--color-heading); }
}


/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner-style-four-area { padding-top: 100px; }

    span.cd-headline { display: block; }

    .process-style-two-items { padding-left: 60px; padding-top: 0; }

    .process-style-two { margin-top: 60px; }

    .process-style-two-items::after { height: 100%; width: 2px; right: auto; left: 0; }

    .process-style-two h4::before { left: -115px; top: -10px; }

    .process-style-two h4::after { left: -105px; top: 0px; }

    .process-style-two::after { border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: none; border-right: 15px solid var(--color-optional); left: -15px; top: 60px; }

    .process-style-two.active { margin-top: 0; }

    .choose-us-fun-fact { margin-bottom: 60px; }

    .overview-area { background-size: 0; }

    .testimonial-shape { display: none; }

    .testimonial-style-three p { font-size: 18px; line-height: 1.7; }

    .testimonial-style-three .provider h4 { font-size: 20px; }

    .testimonial-style-three .provider span { font-size: 13px; }

    .testimonial-style-three .item::after { height: 320px; width: 320px; }

    .swiper-pagination.testimonial-three-pagination { position: relative; top: auto; bottom: 0; }

    .testimonial-style-three { padding-bottom: 0; }

    .faq-style-three-area { background: var(--bg-gradient-reverse) !important; }

    .faq-style-three-area .video-play-button-standard { display: none; }
}

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

    .heading { font-size: 36px !important; }

    .banner-style-four-area { padding: 60px 0; overflow: hidden; }

    .banner-style-four .title { font-size: 36px; }

    .banner-style-four .content p { padding: 0; }

    span.cd-headline { display: block; }

    .process-style-two-items { padding-left: 50px; padding-top: 0; margin-left: 20px; }

    .process-style-two { margin-top: 60px; }

    .process-style-two-items::after { height: 100%; width: 2px; right: auto; left: 0; }

    .process-style-two h4::before { left: -100px; top: -10px; }

    .process-style-two h4::after { left: -90px; top: 0px; }

    .process-style-two::after { border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: none; border-right: 15px solid var(--color-optional); left: -15px; top: 60px; }

    .process-style-two.active { margin-top: 0; }

    .service-overview-tab-navs::before { display: none; }

    .service-overview-tab-navs::after { border-radius: 10px; background: var(--bg-gradient-reverse); }

    .service-overview-tab-navs { padding: 25px 30px; margin: 0; }

    .service-overview-tab-navs button.nav-link { padding: 10px 20px; }

    .service-overview-single { text-align: center; }

    .choose-us-fun-fact { margin-bottom: 50px; padding: 60px 50px; }

    .choose-us-fun-fact::before { display: none; }

    .choose-us-style-two ul li { display: block; margin: 0; margin-top: 10px; }

    .choose-us-fun-fact .fun-fact { margin-top: 25px; }

    .testimonial-shape { display: none; }

    .testimonial-style-three p { font-size: 18px; line-height: 1.7; }

    .testimonial-style-three .provider h4 { font-size: 20px; }

    .testimonial-style-three .provider span { font-size: 13px; }

    .testimonial-style-three .item::after { height: 320px; width: 320px; }

    .swiper-pagination.testimonial-three-pagination { position: relative; top: auto; bottom: 0; }

    .testimonial-style-three { padding-bottom: 0; }

    .faq-style-three-area { background: var(--bg-gradient-reverse) !important; }

    .faq-style-three-area .video-play-button-standard { display: none; }
}


/* Custom Mobile  */
@media only screen and (max-width: 480px) {
    .service-review { display: block; }

    .service-review .rating-provider { margin-bottom: 30px; }

    .process-style-two { padding: 60px 30px; }
}

/* ============================================================== 
     # Home Personal Portfolio 
=================================================================== */

.banner-style-five-area { padding-top: 150px; }

.banner-style-five h4 { display: inline-block; font-weight: 600; font-size: 30px; text-transform: capitalize; margin-bottom: 10px; }

.banner-style-five h4 b { top: -3px; font-weight: 600; color: var(--color-optional); }

.banner-style-five h2 { font-size: 75px; font-weight: 600; margin-bottom: 25px; text-shadow: 2px 2px #000, -2px 2px #000, 2px -2px #000, -2px -2px #000, 5px 5px 0px rgba(0, 0, 0, 0.2); color: var(--white); text-transform: uppercase; }

.banner-style-five p { font-size: 18px; line-height: 1.7; margin: 0; margin-top: 7px; }

.pf-social li { display: inline-block; margin-right: 10px; }

.pf-social li a { display: inline-block; height: 60px; width: 60px; line-height: 62px; text-align: center; background: var(--white); border-radius: 50%; font-size: 20px; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); }

.pf-social { margin: 0; padding: 0; list-style: none; margin-top: 30px; }

.pf-social li a:hover { background: var(--color-optional); color: var(--white); }

.banner-style-five .thumb { position: relative; z-index: 1; }

.banner-style-five .thumb .shape { position: absolute; left: 0; bottom: 0; z-index: -1; }

.banner-style-five .information { margin-top: -60px; position: relative; z-index: 1; }

.banner-style-five .information::after { position: absolute; left: -20%; top: -20%; content: ""; height: 200px; width: 200px; background: red; z-index: -1; border-radius: 50%; filter: blur(100px); opacity: 0.3; }

.btn-shape { position: relative; display: inline-block; font-weight: 600; padding: 12px 50px; border: 2px solid; text-transform: uppercase; }

.btn-shape::after { position: absolute; left: 10px; bottom: -8px; top: 8px; right: -8px; content: ""; height: 15px; border-right: 8px solid var(--dark); border-bottom: 8px solid var(--dark); height: 100%; transition: all 0.35s ease-in-out; }

.btn-shape:hover::after { left: 0; bottom: 0; top: 0; right: 0; }

.btn-shape:hover { background: var(--dark) !important; border-color: var(--dark); color: var(--white); }

.author-social { position: absolute; right: 8%; bottom: 20%; z-index: 1; }

.author-social label i { transform: rotate(45deg); font-weight: 500; }

.share-button i { transition: .3s ease; }

.share-toggle:checked ~ .share-button i { transform: rotate(-180deg) !important; }

.share-toggle:checked ~ .share-icon:nth-child(3) { transform: translateY(-70px) rotate(0); }

.share-toggle:checked ~ .share-icon:nth-child(4) { transform: translateY(-125px) rotate(0); }

.share-toggle:checked ~ .share-icon:nth-child(5) { transform: translateY(-180px) rotate(0); }

.share-toggle:checked ~ .share-icon:nth-child(6) { transform: translateY(-235px) rotate(0); }

.share-button { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; color: var(--color-heading); background-color: #ffffff; border-radius: 50%; box-shadow: 0px 0px 0px 2px #ffffff; cursor: pointer; transition: .3s ease; transform: rotate(45deg); }

.share-icon { position: absolute; top: 0; display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; border-radius: 45px; transform: translateX(0) rotate(180deg); cursor: pointer; transition: .3s ease-in-out; background: var(--dark); color: var(--white) !important; border: 1px solid rgba(255, 255, 255, 0.3); }

.author-social::after { position: absolute; left: 50%; top: 50%; content: ""; height: 65px; width: 65px; background: var(--white); border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; margin-top: -4%; z-index: -1; }

/* Performance */
.performance-items { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 30px; }

.performance-item a { text-align: center; padding: 40px; border: 1px dashed #cccccc; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f9f9f9; }

.performance-item a i { font-size: 40px; margin-right: 15px; }

.performance-item a:hover { background: var(--color-optional); border-color: var(--color-optional); color: var(--white); }


/* About */
.about-style-three-items { position: relative; padding: 120px 0; }

.about-style-three-items::after { position: absolute; left: -10%; right: -10%; content: ""; top: -10%; bottom: 0; background: var(--dark); z-index: -1; border-radius: 30px; }

.about-style-three h2 { text-transform: capitalize; margin-bottom: 15px; font-size: 60px; font-weight: 600; }

.about-style-three p { opacity: 0.8; }

ul.about-list li strong { text-transform: uppercase; font-weight: 600; position: relative; z-index: 1; padding-right: 50px; width: 100px; margin-right: 28px; color: var(--white); font-size: 15px; }

ul.about-list { margin: 0; padding: 0; list-style: none; margin-top: 30px; color: #dadada; }

ul.about-list li { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.3); padding-top: 10px; }

ul.about-list li:first-child { margin-top: 0; padding-top: 0; border: none; }

ul.work-now { margin: 0; list-style: none; background: var(--white); padding: 50px; border-radius: 10px; font-weight: 600; }

ul.work-now li { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; border-top: 2px solid; padding-top: 30px; }

ul.work-now li img { height: 30px; }

ul.work-now li h4 { font-weight: 600; }

ul.work-now li .work-time { display: inline-block; background: var(--dark); padding: 8px 30px; border-radius: 10px; color: var(--white); }

ul.work-now li:first-child { margin-top: 0; padding-top: 0; border: none; }


/* Services */

.service-style-three .icon { background: #f7f7f7; border-radius: 10px; padding: 50px; margin-bottom: 30px; width: 100%; text-align: center; position: relative; z-index: 1; overflow: hidden; }

.service-style-three .icon::after { position: absolute; left: 50%; bottom: -50px; content: ""; height: 150px; width: 150px; transform: translateX(-50%); background: var(--white); opacity: 0.2; border-radius: 50%; }

.service-style-three .icon img { height: 80px; margin: auto; }

.service-style-three .icon.figma { background: #ff7361; }

.service-style-three .icon.wordpress { background: #0071bc; }

.service-style-three .icon.bootstrap { background: #7952b3; }

.service-style-three { padding: 30px; border: 1px solid #dddddd; border-radius: 10px; position: relative; }

.service-style-three span { position: absolute; height: 50px; width: 50px; line-height: 50px; bottom: 21px; color: #d7d4de; font-size: 50px; padding-right: 100px; font-weight: 700; background: var( --white); }

.service-style-three .info > a { text-align: right; text-transform: uppercase; font-size: 14px; border-bottom: 1px solid; padding-right: 0; display: block; padding-bottom: 10px; padding-top: 10px; color: var(--color-paragraph); }

.service-style-three .info > a i { transform: rotate(-45deg); margin-left: 5px; }

.service-style-three .info > a:hover { color: var(--color-optional); }

.service-style-three a:hover { color: var(--color-optional); }

body { overflow: unset; }


/* Portfolio */
.portfolio-items.colums-2 .pf-item { float: left; width: 50%; padding: 15px; }

.portfolio-items { margin: -15px; }

.pf-item .thumb { overflow: hidden; position: relative; z-index: 1; }

.pf-item .thumb::after { position: absolute; left: 50%; top: 50%; content: ""; height: 0; width: 0; background: var(--color-optional); transform: translate(-50%, -50%); border-radius: 50%; transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; }

.pf-item:hover .thumb::after { height: 1000px; width: 1000px; opacity: 0.8; visibility: visible; }

.pf-item .thumb a { display: inline-block; height: 60px; width: 60px; line-height: 60px; background: var(--white); position: absolute; left: 50%; top: 50%; text-align: center; transform: translate(-50%, -10%); border-radius: 50%; z-index: 1; opacity: 0; visibility: hidden; }

.pf-item:hover .thumb a { transform: translate(-50%, -50%); visibility: visible; opacity: 1; }

.pf-item .thumb a:hover { color: var(--color-optional); }

.mix-item-menu { float: right; background: var(--white); padding: 15px; border-radius: 50px; border: 2px solid #e8e2ff; }

.mix-item-menu button { padding: 10px 50px; color: var(--color-heading); margin: 0 2px; border-radius: 30px; background: #f6f6f6; }

.mix-item-menu button.active,
.mix-item-menu button:hover { color: var(--white); }

.mix-item-menu button::after { background: var(--color-optional); }

.mix-item-menu button.active::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); }

.pf-item .info { margin-top: 20px; }

.pf-item .info h4 { margin-bottom: 5px; }

.pf-item .info h4 a:hover { color: var(--color-optional); }

.pf-item .info .cat span { position: relative; z-index: 1; padding-right: 10px; }

.pf-item .info .cat span::after { position: absolute; right: -1px; top: -3px; content: "/"; }

.pf-item .info .cat span:last-child::after { display: none; }

.col-xl-12 .mix-item-menu { text-align: center; float: none; display: inline-block; }

/* Pricing */
.nav.nav-tabs.pricing-tab-navs { border: none; display: inline-block; margin-bottom: 90px; position: relative; z-index: 1; background: var(--white); width: 71px; border-radius: 30px; padding-left: 3px; }

.nav.nav-tabs.pricing-tab-navs button { display: inline-block; background: transparent; border: none; color: var(--white); padding: 0; border-radius: inherit; overflow: inherit; text-transform: capitalize; font-weight: 500; margin: 0 !important; position: relative; height: 30px; width: 30px; }

.nav.nav-tabs.pricing-tab-navs button::after { display: none; }

.nav.nav-tabs.pricing-tab-navs button::before { position: absolute; left: 0; bottom: 4px; content: ""; height: 27px; width: 0; background: var(--color-optional); transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); border-radius: 40px; }

.nav.nav-tabs.pricing-tab-navs button.active::before { width: 27px; }

.nav.nav-tabs.pricing-tab-navs button span { position: absolute; bottom: -40px; width: 100px; left: -16px; opacity: 0.5; transition: all 0.35s ease-in-out; }

.nav.nav-tabs.pricing-tab-navs button:first-child span { left: -50px; }

.nav.nav-tabs.pricing-tab-navs button.active span { opacity: 1; }

.pricing-style-four { border: 1px solid rgba(255, 255, 255, 0.3); padding: 50px; border-radius: 30px; }

.pricing-style-four i { display: inline-block; font-size: 50px; margin-bottom: 30px; }

.pricing-style-four i.fa-wordpress { color: #21759b; }

.pricing-style-four i.fa-html5 { color: #e34c26; }

.pricing-style-four h4 { font-weight: 600; }

.pricing-style-four ul li { position: relative; z-index: 1; padding-left: 26px; margin-top: 5px; opacity: 0.8; }

.pricing-style-four ul li::after { position: absolute; left: 0; top: 0; content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-size: 14px; }

.pricing-style-four h2 { font-size: 50px; font-weight: 600; margin: 0; margin-top: 20px; }

.pricing-style-four h2 sup { font-size: 30px; }

.pricing-style-four.active { background: rgba(255, 255, 255, 0.1); }

.bg-dark .testimonail-item-one-items::after { background: var(--bg-gradient-reverse); }

.bg-dark .testimonial-style-one .thumb::after { background-color: var(--color-optional); }

.secondary button { background: var(--color-optional); }

/* Responsive */

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

    /* Banner */
    .banner-style-five h4 { display: block; }

    .banner-style-five .thumb { margin-top: 60px; text-align: center; }

    .banner-style-five .thumb > img { max-width: 80%; margin: auto; }

    .banner-style-five .thumb .shape { max-width: 80%; left: 10%; }

    .banner-style-five .information { margin: 0; text-align: center; }

    .author-social { right: 17%; }

    .performance-items { grid-template-columns: 1fr 1fr; }

    .mix-item-menu { float: left; margin-top: 30px; }

    .about-style-three-area { overflow: hidden; margin-top: 120px; }

    ul.work-now { margin-top: 50px; }
}

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

    /* Banner */
    .banner-style-five h4 { display: block; }

    .banner-style-five .thumb { margin-top: 60px; text-align: center; }

    .banner-style-five .thumb > img { max-width: 80%; margin: auto; }

    .banner-style-five .thumb .shape { max-width: 80%; left: 10%; }

    .banner-style-five .information { margin: 0; text-align: center; }

    .banner-style-five-area { padding-top: 100px; }

    .author-social { right: 17%; }

    .performance-items { grid-template-columns: 1fr 1fr; }

    .mix-item-menu { float: left; }

    .about-style-three-area { overflow: hidden; margin-top: 120px; }

    ul.work-now { margin-top: 50px; }
}

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

    /* Banner */
    .banner-style-five h2 { font-size: 40px; line-height: 1.2; margin-bottom: 15px; }

    .banner-style-five h4 { display: block; }

    .banner-style-five .thumb { margin-top: 60px; text-align: center; }

    .banner-style-five .thumb > img { max-width: 80%; margin: auto; }

    .banner-style-five .thumb .shape { max-width: 80%; left: 10%; }

    .banner-style-five .information { margin: 0; text-align: center; }

    .banner-style-five-area { padding-top: 60px; }

    .author-social { right: 17%; }


    /* About */

    .about-style-three-items { padding: 50px 0; }

    ul.work-now li { display: block; }

    ul.work-now li .work-time { margin-top: 20px; }

    ul.work-now { margin-top: 30px; }

    .performance-items { grid-template-columns: 1fr; }

    .about-style-three-items::after { border-radius: inherit; top: -5%; }

    .about-style-three-area { overflow: hidden; }

    .performance-area { padding-bottom: 50px; }

    /* Portfolio */

    .mix-item-menu button { display: block; width: 100%; margin-top: 15px; background: var(--white); padding: 15px; }

    .mix-item-menu { float: none; background: transparent; border: none; padding: 0; }

    .portfolio-items.colums-2 .pf-item { width: 100%; }
}

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


/* ============================================================== 
     # Home Comming Soon 
=================================================================== */

.comming-soon-area { height: 100%; position: relative; z-index: 1; overflow: hidden; }

.comming-soon-area .bottom-info { display: flex; justify-content: space-between; position: absolute; width: 100%; padding: 50px; bottom: 0; height: auto; }

.comming-soon-area .bottom-info .item-list { display: flex; text-align: left; justify-content: left; align-items: baseline; }

.comming-soon-area .bottom-info .left-info { text-align: left; }

.comming-soon-area .bottom-info h4 { font-weight: 600; text-transform: capitalize; margin-bottom: 30px; }

.comming-soon-area .bottom-info .item-list .counter-item span { display: block; font-size: 36px; font-weight: 600; margin-right: 2px; color: var(--white); }

.comming-soon-area .bottom-info .item-list .counter-item { margin-right: 30px; border-right: 1px solid rgba(255, 255, 255, 0.5); padding-right: 30px; }

.comming-soon-area .bottom-info .item-list .counter-item:last-child { margin: 0; padding: 0; border: none; }

.comming-soon-area .bottom-info .item-list .item { font-weight: 500; display: flex; align-items: baseline; color: #b7e2ff; font-size: 20px; }

ul.site-social li { display: inline-block; }

ul.site-social li a { display: inline-block; color: var(--white); height: 45px; width: 45px; line-height: 45px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; margin-left: 10px; text-align: center; }

.comming-soon-area .bottom-info .right-info { text-align: right; }

.comming-soon-area div { height: 100%; }

.comming-soon-area .align-center div { height: auto; }

.comming-soon-area .content { margin-top: -50px; }

.comming-soon-area .content h1 { font-size: 100px; font-weight: 500; line-height: 1; margin-bottom: 35px; }

.comming-soon-area .content p { padding: 0 15%; font-size: 20px; }

.comming-soon-area .newsletter.secondary { max-width: 60%; margin: 35px auto; }

nav.navbar.navbar-default.validnavs.white.navbar-position-fixed { position: absolute !important; width: 100%; top: 0; background: transparent !important; padding: 25px 0; }

.comming-soon-area .newsletter.secondary button { background: #ff00a0; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .comming-soon-area { height: auto; }

    .comming-soon-area div { height: auto; }

    .comming-soon-area .content { margin: 0; padding-top: 160px; padding-bottom: 230px; }

    .comming-soon-area .content h1 { font-size: 60px; }

    nav.navbar.navbar-default.validnavs.white.navbar-position-fixed a.navbar-brand { position: relative; top: 30px; }

    nav.navbar.navbar-default.validnavs.white.navbar-position-fixed { border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 10px 0; }

    nav.navbar.navbar-default.validnavs.white.navbar-position-fixed .align-items-center { justify-content: center; display: flex; align-items: center; }
}

@media only screen and (max-width: 767px) {
    .comming-soon-area { height: auto; }

    .comming-soon-area div { height: auto; }

    .comming-soon-area .content { margin: 0; padding-top: 120px; padding-bottom: 0; }

    .comming-soon-area .content h1 { font-size: 36px; line-height: 1.2; margin-bottom: 20px; }

    nav.navbar.navbar-default.validnavs.white.navbar-position-fixed { padding-top: 50px; }

    .comming-soon-area .content p { padding: 0 5%; font-size: 15px; line-height: 1.7; }

    .comming-soon-area .newsletter.secondary { max-width: 90%; }

    .comming-soon-area .bottom-info { display: block; text-align: center; margin-top: 0; position: relative; padding-top: 0; }

    .comming-soon-area .bottom-info .left-info { text-align: center; }

    .comming-soon-area .bottom-info .item-list .counter-item { margin-right: 20px; margin-left: 0; padding: 0; padding-right: 20px; }

    .comming-soon-area .bottom-info .item-list { text-align: center; justify-content: center; }

    .comming-soon-area .bottom-info .item-list .item { text-align: center; }

    .comming-soon-area .bottom-info .right-info { text-align: center; margin-top: 30px; }
}

/* ============================================================== 
     # Preloader 
=================================================================== */

.anaton-preloader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: default; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 9000; }

.anaton-preloader .animation-preloader { z-index: 1000; }

.anaton-preloader .animation-preloader .spinner { -webkit-animation: spinner 1s infinite linear; animation: spinner 1s infinite linear; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.2); border-top-color: var(--color-primary); height: 100px; margin: 0 auto 30px auto; width: 100px; }

.torch-red .anaton-preloader .animation-preloader .spinner { border-top-color: var(--color-primary); }

.anaton-preloader .animation-preloader .txt-loading { font: bold 56px var(--font-heading); text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.anaton-preloader .animation-preloader .txt-loading .letters-loading { color: rgba(0, 0, 0, 0.2); position: relative; }

.anaton-preloader .animation-preloader .txt-loading .letters-loading:before { -webkit-animation: letters-loading 4s infinite; animation: letters-loading 4s infinite; color: #000000; content: attr(data-text-preloader); left: 0; opacity: 0; font-family: var(--font-heading); position: absolute; top: -3px; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(2):before { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(3):before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(4):before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(5):before { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(6):before { -webkit-animation-delay: 1s; animation-delay: 1s; }

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(7):before { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(8):before { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }

.anaton-preloader.dark .animation-preloader .spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; }

.anaton-preloader.dark .animation-preloader .txt-loading .letters-loading { color: rgba(255, 255, 255, 0.2); }

.anaton-preloader.dark .animation-preloader .txt-loading .letters-loading:before { color: #fff; }

.anaton-preloader p { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 8px; color: #3b3b3b; }

.anaton-preloader .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; z-index: 1; pointer-events: none; }

.anaton-preloader .loader .row { height: 100%; }

.anaton-preloader .loader .loader-section { padding: 0px; }

.anaton-preloader .loader .loader-section .bg { background-color: #ffffff; height: 100%; left: 0; width: 100%; -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); }

.anaton-preloader .loader.dark_bg .loader-section .bg { background: #111339; }

.anaton-preloader.loaded .animation-preloader { opacity: 0; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; }

.anaton-preloader.loaded .loader-section .bg { width: 0; -webkit-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); -o-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); }

@-webkit-keyframes spinner {
    to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

@keyframes spinner {
    to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

@-webkit-keyframes letters-loading {
    0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }

    25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}

@keyframes letters-loading {
    0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }

    25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}

@media screen and (max-width: 767px) {
    .anaton-preloader .animation-preloader .txt-loading { font: bold 3.5em var(--font-heading); }
}

@media screen and (max-width: 500px) {
    .anaton-preloader .animation-preloader .txt-loading { font: bold 2em var(--font-heading); }
}

/* ============================================================== 
     # Home Creative Agency 
=================================================================== */

.bg-dark-optional,
.bg-dark-optional p { color: #cccccc; }

.bg-dark-optional .sub-heading,
.dark-layout .sub-heading,
.bg-dark .sub-heading { color: var(--color-optional); background: linear-gradient(90deg, var(--color-optional) 0%, #00ff8c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.bg-dark-optional { background: #0c0f14; }

.banner-creative { padding-top: 250px; overflow: hidden; }

.creative-thumb { width: 120%; margin-left: -10%; position: relative; }

.creative-thumb img { border-radius: 10px; }

.creative-banner { position: absolute; left: 0; top: 0; width: 100%; height: 90%; background-size: cover; background-position: center top; z-index: -1; }

.banner-style-creative h2 { font-size: 100px; font-weight: 600; text-transform: uppercase; margin: 0; display: inline-block; }

.banner-style-creative h2 strong { display: inline-block; float: right; font-size: 200px; position: relative; bottom: -100px; line-height: 1; margin-top: -100px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: cover; background-position: left; z-index: 1; position: relative; }

ul.contact-list { z-index: 1; display: flex; align-items: center; position: absolute; right: 0; bottom: 0; padding: 50px 30px; padding-bottom: 100px; }

ul.contact-list li { border-right: 1px solid rgba(255, 255, 255, 0.3); padding: 0 35px; }

ul.contact-list li:last-child { border: none; }

ul.contact-list h5 { text-transform: uppercase; font-weight: 600; margin-bottom: 5px; }

ul.contact-list a { font-weight: 300; }

/* Services */

.services-style-three-grid { display: grid; grid-row-gap: 40px; grid-template-columns: 1.5fr 1fr 1fr; grid-column-gap: 30px; }

.services-style-three { padding: 60px 30px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px; position: relative; z-index: 1; overflow: hidden; }

.services-style-three::after { position: absolute; right: 50%; bottom: -40%; height: 300px; width: 100%; content: ""; background: linear-gradient(120deg, transparent, rgba(237, 245, 255, 0.1)); z-index: -1; transform: rotate(45deg); transition: all 0.25s ease-in-out; border-radius: 30px; }

.services-style-three:hover::after { height: 200%; width: 200%; right: -50%; bottom: -50%; }

.services-style-three img { height: 100px; margin-top: 30px; }

/* About */
.about-style-four-thumb { display: grid; grid-template-columns: 1fr 2.8fr; grid-column-gap: 30px; align-items: end; position: relative; margin-bottom: 80px; }

.curve-text svg { fill: var(--white); height: 170px; width: 170px; overflow: inherit; animation: spinner 20s infinite linear; }

.curve-text svg { border-radius: 50%; padding: 30px; position: relative; z-index: 1; font-size: 22px; height: 180px; width: 180px; text-transform: uppercase; font-weight: 500; }

.curve-text svg a { display: inline-block; position: absolute; left: 50%; top: 50%; }

.curve-text { display: inline-block; position: relative; height: 180px; width: 180px; border-radius: 50%; }

.curve-text a { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); z-index: 9; height: 45px; width: 45px; line-height: 45px; text-align: center; font-size: 40px; -webkit-text-stroke: 1px var(--white); color: transparent; }

.curve-text svg path { fill: none; }

.curve-text svg text { fill: var(--white); letter-spacing: 4px; }

.curve-text img { position: absolute; left: 50%; top: 50%; height: 60px; z-index: 9; transform: translate(-50%, -50%); margin-top: -3px; }

.about-style-four-thumb .curve-text { position: absolute; left: 14%; top: 45px; }

.about-style-four-thumb > img { border-radius: 10px; }

.curve-text::before { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; border: 45px solid var(--color-optional); border-radius: 50%; }

.about-style-four-thumb > img:first-child { position: relative; max-width: 190%; bottom: -80px; border: 1px solid rgba(255, 255, 255, 0.2); }

.button-more { display: flex; align-items: center; justify-content: right; position: relative; z-index: 1; }

.button-more::after { position: absolute; left: 0; top: 50%; content: ""; height: 1px; width: 100%; border-top: 1px solid; z-index: -1; }

.button-more a { display: inline-block; background: #0c0f14; text-transform: uppercase; padding-left: 30px; position: relative; z-index: 1; }

.button-more a i { transform: rotate(-45deg); margin-left: 4px; }

.button-more a::after { position: absolute; right: -30px; content: ""; top: 50%; transform: translateY(-50%); height: 90px; width: 90px; border: 1px solid rgba(255, 255, 255, 0.3); z-index: -1; border-radius: 50%; }

.about-style-four-info h5 { position: relative; z-index: 1; line-height: 1.6; margin-bottom: 25px; font-weight: 500; }

.about-style-four-info h2 { margin-bottom: 30px; }

/* Portfolio */
.portfolio-style-one .thumb { position: relative; }

.portfolio-style-one .tags a { display: inline-block; background: var(--bg-gradient-reverse); text-transform: uppercase; font-size: 12px; padding: 2px 15px; border-radius: 5px; margin-bottom: 20px; }

.portfolio-style-one .info { padding-left: 30px; margin-top: 30px; display: flex; align-items: center; justify-content: space-between; }

.portfolio-style-one .info ul.gallery-list { margin-bottom: 10px; display: block; }

.portfolio-style-one .info ul.gallery-list li { color: #cccccc; font-weight: 400; }

.portfolio-style-one .info a.link i { font-size: 65px; transform: rotate(-45deg); color: transparent; -webkit-text-stroke: 1px var(--white); }

.portfolio-style-one .info h4 { margin: 0; }

.portfolio-style-one .link { display: inline-block; }

.portfolio-pagination { position: absolute; right: 15px; bottom: 0; width: 200px; text-align: right; }

.portfolio-pagination .pf-pagination { text-align: right; display: flex; align-items: center; justify-content: right; }

.portfolio-pagination .pf-pagination span.swiper-pagination-bullet { background: var(--color-optional); height: 15px; width: 15px; opacity: 1; }

.portfolio-pagination .pf-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { height: 25px; width: 25px; opacity: 1; border: 2px solid var(--white); background: transparent; }

.bg-dark-optional .testimonial-style-three .item::after { background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 0, 0, 0) 30%, var(--dark) 100%) repeat scroll 0 0; height: 500px; width: 500px; }


.bg-dark-optional .swiper-pagination.testimonial-three-pagination { position: relative; top: 0; }

.bg-dark-optional .testimonial-style-three { padding-bottom: 0; }

.bg-dark-optional nav.navbar ul.nav > li > a { color: var(--white); }

.bg-dark-optional nav.navbar.validnavs.navbar-fixed { background: #0c0f14 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }

.bg-dark-optional .f-item.about::before { display: none; }

.bg-dark-optional .faq-style-one { background: var(--dark-secondary); border-color: transparent; }

.bg-dark-optional .faq-tab-navs .nav-link.active,
.bg-dark-optional .faq-tab-navs .nav-link:hover { background: var(--color-optional); }

/* Fun Factor */
.fun-fact-style-one-lists { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 60px; }

.fun-fact-style-one-lists .fun-fact { border: 1px solid rgba(255, 255, 255, 0.2); padding: 40px 30px; border-radius: 100px; text-align: center; }

.fun-fact-style-one-lists .fun-fact .counter { color: transparent; -webkit-text-stroke: 1px var(--white); font-weight: 700; justify-content: center; margin-bottom: 10px; }



/* ============================================================== 
     # Home Chatbot
=================================================================== */
.banner-style-six-area { padding-top: 190px; padding-bottom: 120px; }

.banner-style-six .thumb { position: relative; z-index: 1; padding: 0 70px; }

.banner-style-six .thumb::after { position: absolute; left: 50%; top: 50%; content: ""; height: 550px; width: 550px; transform: translate(-50%, -50%); background: var(--white); z-index: -1; border-radius: 50%; opacity: 0.4; box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%); }

.banner-style-six .thumb::before { position: absolute; left: 50%; top: 50%; content: ""; height: 450px; width: 450px; margin-top: -225px; margin-left: -225px; border: 2px dashed var(--dark); border-radius: 50%; animation: rotate-animation 70s infinite linear; opacity: 0.4; }

.banner-style-six .thumb img:first-child { z-index: 1; position: relative; }

.banner-style-six .thumb img:nth-child(2) { position: absolute; left: 0; top: 0; height: 100px; margin-top: 50px; margin-left: -40px; z-index: 1; }

.banner-style-six .thumb img:nth-child(3) { position: absolute; right: 0; bottom: 0; height: 100px; margin-bottom: 200px; margin-right: -20px; z-index: 1; }

.banner-style-six .thumb img:nth-child(4) { position: absolute; left: 0; bottom: 0; height: 100px; margin-bottom: 100px; margin-left: 40px; z-index: 1; }

.banner-style-six form { border: 2px solid; border-radius: 10px; position: relative; margin-top: 35px; }

.banner-style-six form input { background: var(--white); height: 66px; border: none; box-shadow: inherit; border-radius: 10px; padding-left: 30px; padding-right: 200px; }

.banner-style-six form button { position: absolute; right: 5px; top: 5px; background: var(--dark); }

.banner-style-six form button::after { background: var(--color-primary); }

.banner-style-six h2 { font-size: 90px; line-height: 1; font-weight: 600; margin-bottom: 25px; }

.banner-style-six h2 strong { font-weight: 600; text-transform: capitalize; color: var(--color-primary); }

.banner-style-six p { font-size: 22px; line-height: 1.7; }

/* Feature */

.btn .fa-arrow-right { transform: rotate(-45deg); font-weight: 500; }

.feature-style-five-area { position: relative; z-index: 1; }

.feature-style-five-area .shape-center { position: absolute; right: 0; z-index: -1; top: 40px; }

.bot-feature-tab-content { border: 2px solid; padding: 80px; border-radius: 10px; }

.bot-feature-tab-content .top { display: flex; align-items: center; margin-bottom: 25px; }

.bot-feature-tab-content .top img { height: 60px; margin-right: 15px; }

.bot-feature-tab-content .top h4 { margin: 0; font-weight: 600; font-size: 28px; }

.bot-feature-tab-navs button.nav-link { width: 100%; border: none; text-align: left; background: transparent; padding: 30px; position: relative; z-index: 1; color: var(--color-paragraph); font-weight: 400; line-height: 28px; font-size: 15px; }

.bot-feature-tab-navs button.nav-link::after { display: none; }

.bot-feature-tab-navs button.nav-link strong { color: var(--color-heading); font-weight: 600; font-size: 20px; margin-bottom: 10px; display: block; }

.bot-feature-tab-navs button.nav-link p { margin-bottom: 0; }

.bot-feature-tab-navs { border: none; margin: 0; }

.bot-feature-tab-navs::before, .bot-feature-tab-navs::after { display: none; }

.bot-feature-tab-navs button.nav-link:first-child { border: none; }

.bot-feature-tab-navs button.nav-link.active { background: #f6f6f6; }

.bot-feature-tab-navs button.nav-link.active h4 { color: var(--color-heading); }

.bot-feature-tab-navs button.nav-link::before { position: absolute; left: 0; bottom: 0; content: ""; height: 1px; width: 100%; border-bottom: 1px solid #dddddd; }

.bot-feature-tab-navs button.nav-link.active::before { display: none; }

ul.link-btn li { display: inline-block; }

ul.link-btn li a { display: inline-block; padding: 7px 20px; border: 1px solid; border-radius: 30px; margin-right: 10px; }

ul.link-btn { list-style: none; margin: 0; padding: 0; margin-top: 30px; }

.feaute-style-five-items { position: relative; }

.feature-illustration { position: absolute; right: -150px; top: -120px; }

.feature-illustration img { width: 250px; }


/* About */
.about-six-thumb { position: relative; padding-left: 100px; padding-right: 80px; margin-bottom: 90px; }

.about-six-thumb img:nth-child(2) { position: absolute; left: -50px; top: 50px; max-width: 50%; }

.about-six-thumb img:nth-child(3) { position: absolute; right: -40px; max-width: 230px; bottom: -100px; }


/* Technology */

.technology-items { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-column-gap: 30px; align-items: center; }

.technology-thumb { position: relative; z-index: 1; }

.technology-content li { display: block; background: #f4f4f4; padding: 30px 40px; margin-top: 45px; position: relative; z-index: 1; border-radius: 10px; }

.technology-content li:first-child { margin-top: 0; }

.technology-content li h4 { margin: 0; font-weight: 500; }

.technology-content li::after { position: absolute; right: -20px; top: 50%; content: ""; border-top: 25px solid transparent; border-bottom: 2px solid transparent; border-left: 20px solid #f4f4f4; transform: translateY(-50%); }

.technology-content:nth-child(3) li::after { right: auto; left: -20px; border-left: none; border-right: 20px solid #f4f4f4; }

.technology-content li:nth-child(2n) { left: -40px; }

.technology-content:nth-child(3) li:nth-child(2n) { left: auto; right: -40px; }

.technology-content:first-child li:first-child { background: var(--bg-gradient); }

.technology-content:first-child li:first-child h4 { color: var(--white); }

.technology-content:first-child li:first-child::after { border-left-color: #fa716f; }

.technology-content:nth-child(3) li:last-child { background: var(--bg-gradient); }

.technology-content:nth-child(3) li:last-child h4 { color: var(--white); }

.technology-content:nth-child(3) li:last-child::after { border-right-color: #ff8a43; }

/* Faq Style Four */
.faq-style-four.faq-style-one { background: rgba(255, 255, 255, 0.06); padding: 80px; border: none; padding-bottom: 120px; }

.faq-style-four.faq-style-one button { color: var(--white) !important; border-color: var(--white) !important; }

.faq-style-four.faq-style-one p { color: #cccccc; }

/* Pricing */

.bg-light .nav.nav-tabs.pricing-tab-navs { background: #f1f1f1; border: 1px solid; }

.bg-light .nav.nav-tabs.pricing-tab-navs button::before { background: var(--bg-gradient); }

.bg-light .pricing-style-four { border: 1px solid #cccccc; }

.bg-light .nav.nav-tabs.pricing-tab-navs { background: #f1f1f1; border: 1px solid; }

.bg-light .nav.nav-tabs.pricing-tab-navs button::before { background: var(--bg-gradient); }

.bg-light .pricing-style-four { border: 1px solid #cccccc; }

.bg-light .nav.nav-tabs.pricing-tab-navs button { color: var(--color-heading); }



/* ============================================================== 
     # Home App Landing
=================================================================== */
.banner-style-seven-area { padding-top: 200px; padding-bottom: 70px; background-position: bottom center !important; }

.banner-style-seven .thumb img { max-width: 80%; margin: auto; }

.banner-style-seven .thumb { text-align: right; }

.banner-style-seven h2 { font-size: 55px; font-weight: 600; margin-bottom: 30px; }

.banner-style-seven p { font-size: 20px; line-height: 1.7; opacity: 0.9; }

.app-review { display: flex; font-weight: 600; font-size: 20px; margin-top: 25px; }

.app-review .rating { margin-right: 10px; }

.soft-info-thumb .btn::after { background: var(--dark) !important; }

.soft-info-thumb .btn:hover { color: var(--white) !important; }

.app-review .rating i { color: #ffd400; }

ul.multi-button li a { display: flex; border: 1px solid; padding: 10px 25px; border-radius: 10px; min-height: 70px; justify-content: center; align-items: center; }

ul.multi-button li { float: left; margin-right: 20px; }

ul.multi-button li a i { font-weight: 100; font-size: 45px; margin-right: 12px; }

ul.multi-button li h5 { text-transform: uppercase; margin-bottom: 5px; font-size: 11px; }

ul.multi-button li h4 { font-weight: 500; margin: 0; font-size: 18px; }

ul.multi-button li:last-child { margin-right: 0; }

ul.multi-button { margin-top: 40px; display: block; }

ul.multi-button li a i.fa-google-play { font-size: 40px; }

ul.multi-button li a:hover { background: var(--color-optional); }

ul.multi-button li:last-child a { background: var(--bg-gradient-reverse); }

/* Fun Factor */
.fun-fact-style-two-lists { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; grid-column-gap: 30px; }

.fun-fact-style-two-lists .fun-fact .counter { align-items: center; justify-content: center; margin-bottom: 10px; }

.fun-fact-style-two-lists .fun-fact { border-right: 1px solid #cccccc; }

.fun-fact-style-two-lists .fun-fact:last-child { border: none; }

.fun-fact-style-two-lists .fun-fact span.medium i { font-weight: 100; font-size: 20px; margin-right: 6px; color: var(--color-optional); }

.fun-fact-style-two-lists .fun-fact span.medium { display: flex; align-items: center; justify-content: center; }

/* Feture */
.bg-text { display: inline-block; font-size: 200px; position: relative; line-height: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: cover; background-position: center; position: relative; font-weight: 700; margin-top: -30px; }

.bg-text b { text-align: right; float: right; font-weight: 700; }

.feature-style-four { padding: 67px 37px; border: 1px solid #d6e9ed; border-radius: 30px; background: var(--white); position: relative; z-index: 1; overflow: hidden; }


.feature-style-four img { margin-bottom: 30px; height: 80px; }

.feature-style-four h4 { font-weight: 600; font-size: 24px; }

.feature-style-four p { margin: 0; }

.feature-style-four.active { background: #f6fafd; }

.feature-style-four span { position: absolute; right: 37px; height: 60px; width: 60px; text-align: center; line-height: 42px; border: 10px solid #d3f1ff; color: var(--color-heading); font-weight: 800; border-radius: 50%; font-size: 20px; top: 72px; }

.feature-style-four span::after { position: absolute; left: 50%; top: -100px; content: ""; height: 100px; transform: translateX(-50%); border-left: 2px dashed #d6e9ed; }

.feature-style-four-items { position: relative; }

.shape-left-top { position: absolute; left: -15%; top: -120px; }

.shape-left-top img { width: 50%; }


/* Free Trial */
.blur-bg-thumb { position: relative; z-index: 1; }

.blur-bg-thumb::after { position: absolute; left: 50%; top: 50%; content: ""; height: 500px; width: 500px; z-index: -1; background: var(--color-optional); transform: translate(-50%, -50%); border-radius: 50%; filter: blur(100px); }

.subscribe-form form { border: 1px solid rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; border-radius: 30px; margin-top: 40px; width: 80%; }

.subscribe-form form input,
.subscribe-form form input:focus { background: transparent; box-shadow: none; border: none; height: 60px; border-radius: 30px; padding-left: 30px; color: var(--white); }

.subscribe-form form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #cccccc; }
.subscribe-form form input::-moz-placeholder { /* Firefox 19+ */ color: #cccccc; }
.subscribe-form form input:-ms-input-placeholder { /* IE 10+ */ color: #cccccc; }
.subscribe-form form input:-moz-placeholder { /* Firefox 18- */ color: #cccccc; }

.subscribe-form form button { position: absolute; right: 5px; top: 5px; text-transform: uppercase; height: 50px; width: 50px; background: var(--color-optional); border-radius: 50%; padding: 0; }

.subscribe-form form button::after { background: var(--color-optional); }

/* App Process */

.app-process-items { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 80px; position: relative; z-index: 1; }

.process-style-three i { display: inline-block; font-size: 35px; font-weight: 100; margin-bottom: 30px; height: 80px; width: 80px; line-height: 82px; text-align: center; border-radius: 50%; position: relative; z-index: 1; color: var(--color-heading); background: var(--white); border: 1px solid #0082ff; }

.process-style-three i::after { position: absolute; left: 50%; transform: translateX(-50%); top: -2px; content: ""; height: 15px; width: 30px; z-index: -1; background: var(--white); }

.process-style-three-area { overflow: hidden; }

.app-process-items::after { position: absolute; right: 0; top: 41px; content: ""; height: 1px; width: 500%; border-top: 2px dashed #d7dbe0; }

.process-style-three h4 { font-weight: 600; }

.process-style-three p { margin: 0; }

.process-style-three:nth-child(2) i::after { top: auto; bottom: -1px; }

.bg-dark .go-premium h5 { color: var(--color-heading); }

.bg-dark .go-premium p { color: var(--color-paragraph); }

.bg-dark .soft-info-thumb img { max-width: 120%; }

.bg-dark .soft-info-list ul li::after { background: var(--white); }

.secondary .pricing-style-one.active .pricing-header { background: var(--color-optional); }

.secondary .pricing-style-one.active { border-color: var(--color-optional); }
.secondary .btn.btn-theme { background: var(--color-optional); color: var(--white); }

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

.secondary .pricing-style-one .pricing-content h2 strong { color: var(--color-heading); }

/* ============================================================== 
    # Responsive CSS
=================================================================== */

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

    /* Home Chatbot */
    .banner-style-six .thumb img { height: 80px !important; }

    .banner-style-six .thumb img:first-child { height: 100% !important; }

    .banner-style-six .thumb::after { height: 400px; width: 400px; }

    .banner-style-six h2 { font-size: 70px; }

    .banner-style-six .thumb::before { display: none; }

    .banner-style-six .thumb img:nth-child(2) { margin-top: 20px; }

    ul.link-btn li a { margin-top: 10px; margin-right: 5px; }

    /* Home Creative Agency */
    .banner-creative { padding-top: 180px; }

    ul.contact-list { padding-bottom: 30px; }

    .fun-fact-style-one-lists { grid-template-columns: 1fr 1fr; }

    /* Home App Landing */
    .banner-style-seven .align-center { align-items: center; }

    .banner-style-seven h2 { font-size: 46px; }

    .bg-dark .soft-info-thumb img { max-width: 100%; }
}

/* Tablet To Mobile */
@media (max-width: 991px) {
}

/* Tablet Layout: 768px.*/
@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* Home Chatbot */
    .banner-style-six .thumb { margin-top: 70px; }

    .banner-style-six .thumb img:nth-child(2) { margin-left: 0; }

    .banner-style-six .thumb img:nth-child(3) { margin: 0; bottom: auto; top: 40%; }

    .bot-feature-tab-content { margin-top: 50px; }

    .about-six-thumb { margin-bottom: 150px; }

    .technology-content li h4 { font-size: 16px; }

    .technology-content li { padding: 20px 30px; margin-top: 30px; }

    /* Home Creative Agency */
    .banner-creative { padding-top: 120px; background-image: none !important; }

    .creative-banner.bg-cover { display: none; }

    ul.contact-list { padding-bottom: 50px; }

    .services-style-three-grid { grid-template-columns: 1fr 1fr; }

    .about-style-four-thumb { margin-bottom: 140px; }

    .portfolio-pagination { position: relative; text-align: left; right: auto; margin-top: 20px; }

    .portfolio-pagination .pf-pagination { text-align: left; justify-content: left; }

    .fun-fact-style-one-lists { grid-template-columns: 1fr 1fr; }

    /* Home App Landing */
    .banner-style-seven .information { margin-top: 0; }

    .banner-style-seven-area { padding-top: 120px; }

    .banner-style-seven .thumb { text-align: center; margin-top: 80px; }

    .bg-text { font-size: 150px; }

    .blur-bg-thumb { margin-bottom: 60px; }

    .bg-dark .soft-info-thumb img { max-width: 100%; }

    .app-process-items { grid-template-columns: 1fr; text-align: center; grid-row-gap: 50px; }
}

/* Mobile */
@media (max-width: 767px) {


    /* Home Creative Agency */
    .banner-style-creative h2 { font-size: 36px; line-height: 1.5; }

    .banner-style-creative h2 strong { font-size: 80px; margin-right: 30px; }

    .services-style-three-grid { grid-template-columns: 1fr; }

    .fun-fact-style-one-lists { grid-template-columns: 1fr; grid-row-gap: 30px; }

    .banner-creative.text-light.overflow-hidden { padding-top: 60px; background: var(--dark); padding-bottom: 50px; }

    ul.contact-list { position: relative; justify-content: center; padding-bottom: 20px; display: block; text-align: center; }

    .banner-creative { background-image: none !important; }

    .creative-banner.bg-cover { display: none; }

    .creative-thumb { margin: 0; width: 100%; padding-top: 40px; }

    ul.contact-list li { border: none; margin-top: 30px; }

    ul.contact-list li:first-child { margin-top: 0; }

    .about-style-four-thumb { margin-bottom: 50px; }

    .about-style-four-thumb > img:nth-child(2) { display: none; }

    .about-style-four-thumb > img:first-child { max-width: 100%; bottom: 0; }

    .about-style-four-thumb { display: block; }

    .about-style-four-thumb .curve-text { display: none; }

    .portfolio-pagination { position: relative; right: auto; left: 0; text-align: left; width: 100%; }

    .bg-dark-optional .testimonial-style-three .item::after { height: 320px; width: 320px; }

    .faq-area.bg-cover.text-light { background-image: none !important; padding-top: 0; }

    .bg-dark-optional .faq-style-one { background: var(--dark); }

    .button-more a::after { display: none; }

    .portfolio-pagination .pf-pagination { text-align: left; justify-content: left; margin-top: 20px; margin-bottom: 15px; }

    /* Home Software Landing */

    .banner-style-seven-area { text-align: center; padding-top: 60px; }

    .banner-style-seven .information { margin: 0; }

    .app-review { justify-content: center; }

    .bg-text b { text-align: center; float: none; }

    .banner-style-seven h2 { font-size: 36px; }

    ul.multi-button li { margin-right: 0; margin-top: 15px; float: none; }

    ul.multi-button { margin-top: 25px; }

    .banner-style-seven .thumb { text-align: center; margin-top: 50px; }

    .fun-fact-style-two-lists { grid-template-columns: 1fr; grid-row-gap: 30px; }

    .fun-fact-style-two-lists .fun-fact { border: none; border-bottom: 1px solid #cccccc; padding-bottom: 30px; }

    .bg-text { font-size: 60px; }

    .shape-left-top { display: none; }

    .blur-bg-thumb::after { height: 100%; width: 100%; }

    .blur-bg-thumb img { max-width: 82%; }

    .blur-bg-thumb { margin-bottom: 30px; }

    .subscribe-form form { width: 100%; }

    .app-process-items { grid-template-columns: 1fr; text-align: center; grid-row-gap: 50px; }

    .bg-dark .soft-info-thumb img { max-width: 100%; }

    /* Home ChatBot */
    .banner-style-six h2 { font-size: 36px; line-height: 1.2; margin-bottom: 20px; }

    .banner-style-six h2 strong { display: block; }

    .banner-style-six p { font-size: 18px; }

    .banner-style-six .thumb::after, .banner-style-six .thumb::before { display: none; }

    .banner-style-six .thumb { margin-top: 50px; }

    .banner-style-six .thumb img { height: 50px !important; }

    .banner-style-six .thumb img:first-child { height: 100% !important; }

    .banner-style-six .thumb img:nth-child(2) { margin: 0; }

    .banner-style-six .thumb img:nth-child(3) { margin: 0; bottom: auto; top: 60px; }

    .banner-style-six-area { padding-top: 60px; padding-bottom: 60px; }

    .banner-style-six .information { margin-top: 0; }

    .bot-feature-tab-content .top { display: block; }

    .bot-feature-tab-content { padding: 50px 30px; }

    .bot-feature-tab-content .top img { margin: 0; margin-bottom: 30px; }

    ul.link-btn li a { margin-top: 10px; margin-right: 5px; }

    .about-six-thumb img:nth-child(3) { display: none; }

    .about-six-thumb { padding: 0; margin: 0; padding-right: 60px; margin-bottom: 30px; }

    .about-six-thumb img:nth-child(2) { left: auto; right: 0; }

    .technology-items { grid-template-columns: 1fr; grid-row-gap: 50px; }

    .technology-content li { left: 0 !important; right: 0 !important; margin-top: 20px; }

    .technology-content li::after { display: none; }

    .faq-style-four.faq-style-one { padding: 30px; padding-bottom: 60px; }
}

.navbar span.badge { background: var(--dark); font-size: 12px; font-weight: 500; margin-left: 5px; padding: 3px 7px; }